Webpack package volume and speed optimization

Webpack packs all of the dependent third-party libraries in the vendor file, and when the dependent libraries are relatively large, the vendor file size is huge.

Several optimization methods:

1. Introduce the non-volatile third-party libraries using CDN, write them in the script tag, and in the Webpack configuration file, the configuration external,webpack will not be packaged at the time of packaging.

2.dllplugin, package the infrequently changing framework into a DLL.

3. Use Splitchunks to split the code.

Optimization of packaging Speed:

1.webpack is packaged by default with Uglify, and is a single-threaded packaging mode that can be run using asynchronous loading, Happypack, parelleluglify multithreaded.

2. Use the route lazy loading method, for example, in Vue-router configuration, the component property uses an on-demand load mode, const FOO = Resolve = require (./foo.vue,resolve);

Webpack package volume and speed optimization