This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

Perform performance optimization based on details, including Quasar refactoring and replacement, image compression and Base64 transformation, SplitChunksPlugin code segmentation, component performance optimization, code performance optimization, code refactoring, Lighthouse analysis optimization, etc

preface

Before I wrote an article on front-end performance optimization from 30s to 2s, from the general direction of optimization, mainly the introduction of plug-ins on demand, plus gZIP compression configuration.

As the project continued to iterate, package sizes began to grow again and the first screen loading needed to be optimized.

This article is mainly about the details of the optimization point, for further optimization processing.

Analysis before Optimization (V5.8)

File analysis after construction

Local environment localhost packaged file analysis:

  1. Four images are too big and need to be optimized
  2. The total size of the entry file is3.22 MB, including runtime.js(4.41KB),Main.js (3.16MB, 804KB compressed), main.css(57.3KB), overall too large, need to be optimized;
  3. Other file sizes, such as common.js(56.6KB), common.css(1.22KB),Vendor.js (184KB, compressed 60KB)

Webpack – bundle – analyzer packet analysis

/ / package. Json file
{
  "scripts": {
    "analyzer": "easy build prod -s"."stats": "easy build prod -s stats"}},// Run the command
$ npm run analyzer
Copy the code

Analysis of js package files: The sum of all packages is 6.45MB (1.45MB after compression), where main.js is 3.16MB (804KB after compression).

Lighthouse Report Analysis

The Analytics Front Page (Home) with Lighthouse built into Google Browser

(1) The embedded configuration of Lighthouse in Google Browser is as follows:

(2) Specific analysis Report:

(3) The analysis file can be saved locally in JSON or HTML form: lighthouse_V5.8. JSON and lighthouse_V5.8. HTML

Through the analysis of website: googlechrome. Making. IO/lighthouse /… , load the json file above, and you can see the specific report later

Quasar optimization (main.js reduced by 62KB)

In the previous article, you configured the Quasar on demand.

Quasar is mostly used for framing (headers, menu bars, tags navigation bar), landing pages, and pop-ups. There is not much need for two frameworks in order to keep the UI uniform.

This time, the code was refactored to replace some of the Quasar components we had previously used with Ant Design Vue, and then modified the configuration of the imported components on demand to make the imported packages smaller.

The overall layout and Menu have not been changed, but the rest have been changed to Ant Design Vue.

(1) Quasar comparison before and after transformation

The related file size of the Quasar before modification is 563.32KB(Gzipped size is 131.34KB) :

After the modification, the related file size of the Quasar is 453.75KB, reduced by 110KB

(2) Comparison of package size before and after transformation

The sum of all packages is 6.39MB (1.43MB after compression), and the entry file size is3.16 MB, where main.js is3.1MB (789KB after compression).Reduced by 0.06MB (62KB)

Image performance optimization (image reduction by 57%)

The detailed configuration can be seen in the picture optimization of front-end performance optimization, which reduces the image resources by about 57%

Image resource optimization before and after comparison:

  • Before optimization: 4.6MB, 110 images
  • Optimized: 2MB,A 57% reduction inAnd the number of images has been reduced to 42, a reduction of 68

Home Analysis

After optimization, in the case of cache, load the home page again, can be analyzed:

  1. The cachedisk cache: packaged CSS files, js files imported through script
  2. The cachememory cache: packaged JS cache, Base64 images
  3. A lot moreBase64 pictures, are small ICONS

Code segmentation optimization (26% fewer packages)

The detailed configuration can be seen in the front-end performance optimization for code splitting, which resulted in a 26% reduction in bundles

Although the entry file was increased by 72 KB, main.js was split into two files, which could be loaded in parallel and could still improve the first screen speed

  • Before optimization: total package 6.57MB, import file 3.16MB, main.js3.1MB
  • Optimized: Total package 4.85MB(Reduce 1.78 MB), entry file 3.23MB(Add 0.06 MB), main.js(1.86MB) + ant_design.js(1.31MB)

Optimized analysis (V5.8)

Post-construction analysis:

  • Before optimization: Total package 6.45MB (1.45MB after compression), import file 3.22MB, main.js 3.1MB
  • Optimized: Total package 4.85MB(Reduce 1.6 MB), entry file 3.23MB(Add 0.01 MB), main.js(1.86MB) + ant_design.js(1.31MB)

Lighthouse Analysis: Performance is down 3 points and everything else is the same, which is definitely a bit awkward

Direction of subsequent optimization

The following optimization direction:

  1. forLighthouseAnalysis report, item by item optimization, improve the score
  2. PerformancePanels are optimized for rows
  3. Component performance optimization
  4. Development performance optimization
  5. Refactoring optimization

See the following items for optimizations, of course, some are already implemented, the following list is a summary of optimizations

Lighthouse optimization

The detailed analysis report and analysis can be found in the following table: Lighthouse Combat Super detailed analysis optimized item by item, and summarized more than ten optimization suggestions according to the Lighthouse report

Actual optimization operation: first optimized the following items, test launch

  1. Font style control: in@font-faceAdd to stylefont-display: swap
  2. Img image addaltattribute
  3. A tag adds linkablehrefattribute
  4. PWA configuration is enabled

PWA detailed configuration document: EasyWebPack PWA configuration

Development performance optimization

  1. Lazy route loading: Different routes are used to divide components into different code blocks to load components on demand. Components are loaded only when they are accessed
  2. Components lazy loading, asynchronous components
  3. Component-based development: common component extraction and encapsulation, reduce the degree of coupling between modules, related requests, resources, logic, etc., are encapsulated inside
  4. Server rendering SSR
  • advantages
    • Better SEO
    • The first screen renders faster
  • disadvantages
    • NodeJS is required to make development more difficult
    • Server-side rendering adds load to the server
    • Development constraints: lifecycle, browser-specific attributes, third-party library differentiation and compatible use, after all, server and client environments are not quite the same
  1. Loading priority processing: According to the visibility, the visible part of the first screen is loaded first, and the rest is loaded lazily
  2. Judge visibility: listen for scroll events and resize events; IntersectionObserver
  3. Skeleton screen use: replace white screen, improve readability

Component performance optimization

  1. Functional component: A component that does not contain states or instances, reducing the performance cost of responsiveness
  2. Local variables: Reasonable use of responsive and non-responsive objects. Data that does not require a response should not be defined indataIn, you can define it directly on the instance
  3. Long list performance optimization: Can passObject.freezeMethod to freeze an object that cannot be modified
  4. useDeferredComponent delay batch rendering component, one component rendering split multiple times
  5. useTime slicingTime slice cutting technology, avoid page stuck
  6. useNon-reactive dataNon-responsive data, reducing recursive responsive logic, is equivalent to reducing the performance of this part of the loss
  7. useVirtual scrollingVirtual scroll component
  8. computed 和 watchFair use of
  9. v-if 和 v-showFair use of
  10. Use opportunelyKeepAliveDynamic component cachingDOMTo avoid unnecessary performance waste
  11. v-for 和 v-ifDo not use both; use computed properties insteadv-if
  12. v-forYou must addkeyBut don’t use itindex

Reference article:

  • Nine performance optimization tips for Vue.js

Refactor plans and plans

With the rapid iteration of agile development projects, more and more redundant code and structure, moderate code refactoring is necessary to improve code readability and code quality, see: Front-end performance optimization refactoring solutions and plans