1. Vue first screen loading is too slow
1. Vue-router route lazy loading
2. In the process of webpack packaging, remove redundant files. If no map file is generated, that is, change the value of productionSourceMap to false in config/index.js, and then no .map file will be generated during compilation.
3. The third-party library uses CDN to import:
1) The first step: CDN can be used to accelerate the introduction (to prevent hanging, it can be downloaded locally and uploaded to your own server)
2) The second step: Separate and package the third-party resource package, go to the vue-config file to configure it externals, and write that you have referenced the cdn library in index.html
4. gzip compression: the front end configures gzip compression, and the server uses nginx to enable gzip to reduce the traffic size of network transmission
1) Command line execution:npm i compression-webpack-plugin -D
2) Add the following code to the dev development configuration file of webpack:
const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [
new CompressionWebpackPlugin()
]
5. Don't abuse third-party libraries, use a function point and import all third parties as needed; use one library as much as possible for a project
6. Optimization at the code level
1) Reduce the number of http requests and reduce the request size
2) Use sprite images, font icons or svg files for pictures; lazy loading of pictures
3) cdn content distribution network
4) javascripte defer asynchronous loading delay execution
5) Load js asynchronously, async means that the JavaScript download is completed, the code will be executed immediately, and the HTML will be parsed after the execution is completed
6) Reasonable use of cache
7) Optimize code, componentization, modularization, code reuse
8) css on the head, js on the bottom
9) Reasonable use of v-if and v-show
10) For loop to set the key value
11) Server-side rendering
12) DNS pre-resolution
13) Defer loading Js
2. White screen optimization
1. On the basis of the above optimized loading, add a skeleton screen and loading during the white screen
2. Server-side rendering, that is, ssr technology, such as nuxt.jstechnology for ssr development
3. The problem of excessive packaging volume
1. webpack packaging does not generate a map file config/index.js productionSourceMap=false
2. Import third-party libraries using CDN
3. gzip compression
4. Do not abuse third-party libraries, introduce components on demand
5. Code simplification and static resources such as image compression and merging
Reference: Vue project home page loading speed optimization and solve the home page white screen problem_vue home page loading too slow white screen_Hao Yanfeng Vip's blog-CSDN blog vue project home page loading speed optimization and solve the home page white screen problem_vue home page loading too slow white screen _Hao Yanfeng Vip's Blog-CSDN Blog Vue Project Homepage Loading Speed Optimization and Solving Homepage White Screen Problem_vue Homepage Loading Slow White Screen_Hao Yanfeng Vip's Blog-CSDN Blog