1, Code modularization , We can package many common parts into separate components , Quote where necessary , Instead of writing too much duplicate code , Each component should have a clear meaning , The higher the reusability, the better , The more configurable, the better , Including ours css Also available through less and sass Customization of css Variables to reduce duplicate code .
2,for Cycle settings key value , In use v-for When performing data traversal rendering , Set unique for each item key value , To make Vue The internal core code can find this data faster , When the old value is compared with the new value , It can be located faster diff.
3,Vue Route is set to lazy load , When the first screen is rendered , Can speed up rendering .
4, More understanding Vue Life cycle of , Do not cause internal leakage , The global variables after use are reset to after the component is destroyed null.
5, have access to keep-alive,keep-alive yes Vue A relatively abstract component provided by , Used to cache components , This saves performance .
6, modify vue.config.js Configuration items in , hold productionSourceMap Set to false, Otherwise, some will be generated after final packaging map file , If you don't turn it off , The generation environment can be map Go to check the source code , And it can be turned on gzip compress , Make the volume smaller after packaging .
7, use cdn Load some resources externally , such as vue-router,axios etc. Vue Peripheral plug-ins for , stay webpack.config.js inside ,externals Some unnecessary external reference modules are set inside . Then in the entry file index.html Inside through cdn To introduce the required plug-ins .
8, Reduce picture usage , Because for web pages , Pictures take up a large part of the volume , therefore , Optimizing the operation of pictures can effectively speed up the loading speed . You can use some css3 Instead of the picture effect , Or use sprite to reduce the size of the image .
9, Import on demand , Some third-party libraries we use can be loaded by importing on demand . Avoid introducing unnecessary parts , Increase project volume without reason . For example, in use element-ui When Library , You can only import the components you need .
Technology