[Tencent cloud front end performance optimization competition] how to use react technology stack from 3000ms to 600ms

White feathe 2022-06-23 18:00:11 阅读数:205


Over time , The front end is growing faster , There are more and more bottlenecks , For performance , Some personal experience , Where the description is inaccurate , I hope you can give me more advice .

The current mainstream framework reactvueargular etc. ( There are still a lot of it ), Most of them are in Vue/React in ,argular Also have , But it doesn't seem to be used much .Vue3.x For performance , Rendering mechanism is also a good choice , But the choice depends on your actual situation , My choice this time is react, There are many reasons , I won't go over it one by one .

Technology stack

This time, we use :[email protected][email protected][email protected][email protected]axiosecharts[email protected][email protected]

Optimization idea

One 、 The code level

  1. Redundant code sorting , Pull out the package ( Method 、 Components 、Style Etc ≥2 More than once )
  2. Reduce logical nesting , Such as ifelseforswitch Etc. itself ( This is also Javascript code Airbnb One of the recommendations )
  3. Reduce HTML div Such semantic tags are deeply nested (Dom Trees ), Not conducive to drawing 、 Rendering
  4. Semantically draw labels , At the same time, it is also convenient for SEO retrieval
  5. Use asynchronous dynamic loading of components , Preloading can also be used , Load on demand ( Components... Apply )
  6. Use Service Worker( For safety reasons ,Service workers Only by HTTPS bearing , Local debugging can use localhost
  7. Use Web Workers

Two 、 From building tools

Because I'm using webpack structure , So the following will use webpack To deal with . have access to webpack Some of them Api, Such as :externalscachemini-css-extract-plugincopy-webpack-pluginoptimization And so on .

JS Optimize

  1. externals To prevent certain import Third party resources are packaged into bundle in , Such as reactreact-dom etc.
  2. optimization from webpack 4 Start , According to your choice mode To perform different optimizations , However, all optimizations can be manually configured and rewritten

Css Optimize

  1. mini-css-extract-plugin Can be Css Single extract into a separate file , Can load asynchronously There is no duplicate compilation ( performance )
  2. autoprefixer Solve the problems of major browser manufacturers CSS The artifact of prefix problem
  3. stylelint-webpack-plugin stylelint Avoid errors in style code and enforce specifications

Picture resource optimization

  1. Svg Image resource processing 1. iconfont-webpack-plugin take svg All icons are built into iconfont Font library ( Customize Svg Icon ) 2. svgo SVG Optimizer It's based on Node.js Tools for , Used to optimize SVG Vector graphics file 3. Use font library You can use the font library provided by Alibaba to handle , See the link for specific steps :https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
  2. Png Image resource processing
  3. Picture bed , It is recommended to use picture bed ( commend ) If there is a corresponding service 1. have access to webpack One kind of support ,image-minimizer-webpack-plugin If there are too many & If it's too big ,webpack The build time of will increase very much 2. plug-in unit 3. pngquant Good compression performance , The compression ratio is also obvious
  4. tinify Online compression tools

【 auxiliary 】

  1. copy-webpack-plugin Copy an existing single file or entire directory to the build directory
  2. cache Cache generated webpack Module and chunk, To improve construction speed
  3. compression-webpack-plugin Provide with Content-Encoding Encoded compressed version of resources
  4. terser-webpack-plugin Compress JavaScript
  5. workbox-webpack-plugin Progressive web applications

3、 ... and 、 analysis

Use the analysis auxiliary function for auxiliary development , The visual view makes it easy to see what dependencies exist in the module , Dependencies that do not need to be loaded on the home page , It can be loaded late or on demand

  1. webpack-bundle-analyzer Interactive scalable tree visualization webpack Size of output file
  2. lighthouse Used to analyze Web Applications and web pages , Collect modern performance indicators

Four 、 The Internet

  1. start-up Gzip Speed up
  2. Use CDN promote ,
  3. Use Http2 Network transmission
  4. Use Http Cache protocol

5、 ... and 、 other

  1. Openable GPU Hardware acceleration , Accelerated rendering ( The actual situation can be rendered according to the project )
  2. Use preload , Preload other required resources
  3. First screen increase Spin loading, To ease resource download ( Poor or unstable network or mobile terminal problems )

performance &LightHouse testing

1. Local detection runs :

Local detection runs

2. Production test run

3. Performance test

Performance test

Traceless browsing mode

In traceless browsing mode

The resources :webpackairbnbautoprefixertinify

版权声明:本文为[White feathe]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/01/202201020248023747.html