Performance Optimization of Vue
Tell everyone about optimizing the performance of Vue. Vue is known to be a lightweight framework. The source code is only 72.9KB, but it also has its own shortcomings, that is, the first screen loading will be slower, because compared with traditional projects , Vue will load all components and plug-ins when the first screen is loaded, and request data from the server, which may sometimes take 4 to 5 seconds to load the first screen.
But doing so is obviously challenging the user's patience. According to convention, it is best to control the loading time to about 1 second. Next, I will talk about the two directions of Vue performance optimization.
One. Source code optimization
1. Code modularity, we can encapsulate many commonly used places into separate components and quote them where needed, instead of writing too much repetitive code. Each component must have a clear meaning, and the higher the reusability, the better Well, the stronger the configurable type, the better, including our css can also reduce duplication of code through the custom css variables of less and sass.
2. The for loop sets the key value. When using v-for for data traversal rendering, set a unique key value for each item. In order to allow the core code of Vue to find the data faster, when the old value and When the new value is compared, the diff can be located faster.
3. The Vue routing is set to lazy loading, which can speed up the rendering when the first screen is rendered.
4. Understand the life cycle of Vue better, and don't cause internal leakage. Global variables after use are reset to null after the component is destroyed.
5. Keep-alive can be used. Keep-alive is a relatively abstract component provided by Vue, which is used to cache components to save performance.
two. Packaging optimization
1. Modify the configuration items in vue.config.js and set productionSourceMap to false, otherwise some map files will be generated after the final packaging. If you don't turn it off, the generation environment can be viewed through map to view the source code, and gzip compression can be turned on , So that the volume becomes smaller after packaging.
2. Use cdn to load some resources externally, such as Vue peripheral plug-ins such as vue-router, axios, etc. In webpack.config.js, set some unnecessary external reference modules in externals. Then use cdn in the entry file index.html to introduce the required plug-ins.
3. Reduce the use of pictures, because for web pages, pictures will take up a large part of the volume, so the operation of optimizing pictures can effectively speed up the loading speed. You can use some css3 effects to replace the picture effects, or use Sprite to reduce the size of the picture.
4. On-demand introduction. Some third-party libraries we use can be loaded by on-demand introduction. Avoid introducing parts that are not needed and increase the project volume for no reason. For example, when using the element-ui library, you can only import the components that you need.