(Personal notes, please point out any mistakes)

1. Reasonably reference local static resources

Use local pictures as little as possible, can be put on the line, or can use ICONS instead of ICONS, really need to put local pictures can make reasonable compression, I use the website is https://tinypng.com/. However, when dealing with H5 embedded in App this time, a large number of pictures were changed and directly called by OSS, but the speed was slower. I didn't go into details. I guess the pictures were all obtained through address request when loading for the first time, and too many image requests would delay the loading time. Optimize and simplify THE JS and CSS code, remove redundant code, (previously seen on the JS and CSS file compression, this time did not do). This step may not reduce the size very much, but it will simplify and standardize the code at the same time. Multi-component or referenced CSS can be hung globally, and some unreferenced components can be deleted. There is also the issue of references to CSS resources - in app.vue, the introduction of CSS and JS libraries should be kept to a minimum.Copy the code

2. Package configuration does not generate map files

Config.index.js build {productionSourceMap: false}Copy the code

3. Configure compression file generation when packaging (webpack plug-in compression-webpack-plugin needs to be installed)

Under the config. Index. Js build {productionGzip: true} compression can be configured productionGzipExtensions: [' js', 'CSS'] - open gzip on backend server configuration; gzip_static on; Note: I have a problem here. After the configuration is packed and compressed, the loading speed does not change very much, even slower than that without compression. At present, I guess there is a problem with the background configuration, so it does not take effect. This causes the foreground to compress and generate a compressed file that occupies the size, but the server does not parse the compressed file but references the original file directly.Copy the code

4. Lazy route loading

Const XXX = () => import('@/components/ XXX ') {path: '/ XXX ', Component: XXX} '/xxx', name: 'xxx', component: Resolve => require(['@/components/ XXX '],resolve)} 3) {path: '/ XXX ', name: 'xxx', component: r => require.ensure([], () => r(require('@/components/xxx')), 'demo') }Copy the code

5. UI and other component libraries are introduced as required

This optimization is necessary because current UI frameworks and plugins tend to be large if all of them are introduced. Import {XXX} ‘vux’ is not imported on demand, so I have been looking for a long time. Finally, through the webpack plug-in (Webpack-bundle-Analyzer), the resources occupied by the package were analyzed, and it was found that the package could only be loaded manually

Namely: import XXXX from 'vux/SRC/components/XXXX/index. The vue' (vux here. Not all directory is the vue, so want to go to see clearly under the node_modules)Copy the code

Of course, other components or plug-in libraries may not have this problem, so this is a note to avoid similar bugs next time

6. Plug-ins and libraries with fewer references are introduced through CDN

Externals: {'vue': 'vue', 'vue-router': externals: {'vue': 'vue', 'vue-router': 'VueRouter', 'axios': 'axios',} Z: Also remember to delete other import methodsCopy the code

7. Code level

1) Reasonable use of V-IF and V-show, watch and computed 2) are standard for key values of V-FOR, and do not use v-IF at the same time on V-FOR tags. 3) Elimination of timers and other methods that occupy space when pages leave