This is the second day of my participation in Gwen Challenge

Since Jenkins was used for automatic deployment of front-end VUE project recently, it took about 4 to 5 minutes to compile each time during development, so I found a method to optimize compilation and packaging speed on the Internet to record it.

According to n methods on the Internet, DLLPlugin and DLLReferencePlugin are the most effective and direct, and their configuration is simple. DLLPlugin and DLLReferencePlugin use a certain method to achieve the separation of bundles and improve the speed of construction.Copy the code

1. First configure webpack.dll.config.js in the config folder (see below). The array of modules to be packaged can put some larger dependencies into vendor

var path = require("path"); var webpack = require("webpack"); module.exports = { entry: { vendor: ['v-charts'] }, output: { path: path.join(__dirname, '.. Filename :'[name].dl.js ', // global variable name exposed in vendor.dl.js. Library :'[name]_library' // same as' name: '[name]_library', 'in webpack.dllPlugin. }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, '.', '[name]-manifest.json'), name:'[name]_library', context: __dirname }), ]};Copy the code

2, add to package.json scripts

“dll”: “webpack –config build/webpack.dll.config.js”

3. Run NPM run DLL to generate vendor-manifest.json and vendor.dll

4. Then import vendor.dll.js in index. HTML

Then you can compile and package normally, and you will find that the more dependencies you put into vendor, the faster the packaging will be

Before optimization

The optimized

On average, it saves about a third of the time.Reference webpack