Several simple ways to improve performance in vue

Several simple methods for vue to improve performance:

1. Vue asynchronous components realize lazy loading. The
    method of      is as follows: component: resolve=>(require(['address of the route to be loaded']), resolve)
2. Use import in ES6 to introduce components
3. Try to use v-if, Reduce the use of v-show
4. Component split, the page is divided into multiple components
5. Use keep-alive to switch routing
6. Use the vue-virtual-scroller component to load lists with too much content
7. v-for plus unique key
8. For long lists, use this.list = Object.freeze(list); freeze data
9. Flatten the tree structure to store data structure to avoid performance overhead caused by multiple loops and recursion.
10. Avoid using v-if at the same time in v-for
11 .Picture lazy loading v-lazy
12. Understand the life cycle of Vue, don’t cause internal leakage, and reset global variables to null after the component is destroyed.
13. Modify the configuration items in vue.config.js and set productionSourceMap to false, otherwise some map files will be generated after the final packaging, and the source code can be viewed through map in the generation environment, which will cause source code leakage. I suggest you set it to false here. Set productionGzip to true to enable gzip compression, making the volume smaller after packaging

Guess you like

Origin blog.csdn.net/qq_43237014/article/details/112168013