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
argular 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 .
AirbnbOne of the recommendations ）
HTML divSuch semantic tags are deeply nested （Dom Trees ）, Not conducive to drawing 、 Rendering
Service Worker（ For safety reasons ,
Service workersOnly by HTTPS bearing , Local debugging can use
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 ：
optimization And so on .
externalsTo prevent certain import Third party resources are packaged into bundle in , Such as
optimizationfrom webpack 4 Start , According to your choice mode To perform different optimizations , However, all optimizations can be manually configured and rewritten
mini-css-extract-pluginCan be Css Single extract into a separate file , Can load asynchronously There is no duplicate compilation ( performance )
autoprefixerSolve the problems of major browser manufacturers CSS The artifact of prefix problem
stylelint-webpack-pluginstylelint Avoid errors in style code and enforce specifications
iconfont-webpack-plugintake svg All icons are built into iconfont Font library （ Customize Svg Icon ） 2.
svgoSVG 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 ：
tinifyOnline compression tools
【 auxiliary 】
copy-webpack-pluginCopy an existing single file or entire directory to the build directory
cacheCache generated webpack Module and chunk, To improve construction speed
compression-webpack-pluginProvide with Content-Encoding Encoded compressed version of resources
workbox-webpack-pluginProgressive web applications
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
webpackSize of output file
WebApplications and web pages , Collect modern performance indicators
GPUHardware acceleration , Accelerated rendering （ The actual situation can be rendered according to the project ）
Spin loading, To ease resource download （ Poor or unstable network or mobile terminal problems ）
Traceless browsing mode
版权声明：本文为[White feathe]所创，转载请带上原文链接，感谢。 https://qdmana.com/2022/01/202201020248023747.html