This article focused on some of their recent problems encountered in the project, and with reference to some articles online, finishing a point on the part of the Vue performance optimization.
Code optimization
Using the v-show and v-if's
Use the v-iftime, if the value is false, then the page will not have this html tag generation, and v-showregardless of the value of true or false, html elements will only exist in CSS display to show or hide, requiring frequent switching of use v-show.
Object.freeze()
Object.freeze () methods to freeze an object. A frozen object can no longer be modified, freeze an object you can not add new attributes to this object, you can not remove an existing property, you can not modify the enumerable properties of the object has, configurability, writable sex, and you can not modify the existing value of the property. In addition, after a frozen object prototype of the object can not be modified. In vue, for use in data or vuex freeze frozen objects, vue getter and setter will not do the conversion, so if you have a huge array or Object, and is confident that will not modify, use Object.freeze ( ) enables performance boost.
Use caution deep watch
According to my lesson of blood and tears, or when you use an array of deep watch a huge Object, cost performance is that you can not imagine the pain.
watch, computed, update or avoiding complex logic beforeUpdate
Complex logic may trigger additional components rendering, and may even lead to circulatory problems rendering. Some common situation is as follows:
- In the calculation of the property to the data set.
- beforeUpdate to set the data, it may make re-rendering components.
- watch and going to modify some value, believe it may re-trigger the watch.
Packaging Optimization
Analysis package size
We can analyze the composition and size of the package after we file through webpack-bundle-analyzer.
- installation
npm install webpack-bundle-analyzer --save-dev
- use
- Configuration
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
configureWebpack: {
...,
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'disabled',
generateStatsFile: true,
statsOptions: { source: false }
})
]
}
package.jsonAdded script
"bundle-report": "webpack-bundle-analyzer --port 8888 dist/stats.json"
- After the package execution
npm run bundle-report
The browser will automatically open the analysis page: http://127.0.0.1:8888
Prudent use third-party libraries
From the above analysis it is not difficult to find figures, my project referenced third-party libraries take up a great proportion of which codemirror, lodash, moment, element- ui libraries and other libraries are relatively common. But for these libraries, we did not use them all of the components or functions, we might use is just one part of a method may even be just a very small, like my code, in fact, only a cloneDeep method of lodash.
For the above, we can take the following measures:
- Delete complete lodash, their own methods to achieve cloneDeep
- VueCodeMirrorLite with lightweight alternative codemirror
- Use plug-ins to get rid moment comes locale
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
Or, instead of lightweight date-fns.
- Own implementation of the project component library, to get rid of dependence element.
Here, we recommend Bundle Phobia to see the size of the reference library.
Routing lazy loading
In this official website is also described here is no longer started.
to sum up
These are personal point summary and ideas, of course, this is only the tip of the iceberg vue performance optimization, there are many networks, image, cache, etc. related to web optimization practice worth thinking about.