Packaging Optimization
1. shield sourceMap
sourceMap effect: After packing, the code is compressed and encrypted, if the run-time error, error messages output unable to accurately know where is the error code.
In the build target index.js file config directory will be changed to false productionSourceMap
2. project code js / css / svg (*. Ico) file gzip compression (needs browser and back-end support)
productionGzip effect: on js, css files are compressed, compressed for svg, ico, bmp files to png, jpg, jpeg without compression
Need to rely on: the need to compress-webpack-plugin support, so the need npm install --save-dev compression-webpack-plugin
Configuration: 1. In an object index.js productionGzip provided in the build file directory is true config
2. productionGzipExtensions: [ 'js', 'css'] needs to be set in a compressed file format
3. routing components lazy loading
Advantages: demand loading, loading speed to reduce the fold
Disadvantages: will produce more js file will result in multiple http requests, while larger projects will generate extra additional consumption
Source Optimization:
1. v-if used with the v-show
2. item set unique value
3. Reduce watch data
4. The segment assembly
The lazy loading (vue-lazyload)
User Experience Optimization
1. better-click click delay prevent iphone
2. skeleton screen to load: prevents the page splash screen and beating
3. Add chrysanthemum loading