Use of DLLPlugin and DLLReferencePlugin

❝

The DLLPlugin and DLLReferencePlugin have somehow managed to break down bundles while greatly increasing the speed of builds.

❞

1. Add —-webpack.dll.config.js to build folder first:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  // An array of modules to package
 entry: {  vendor: ['vue/dist/vue.esm.js'.'vue-router']  },  output: {  path: path.join(__dirname, '.. /static/js'), // The output location of the packaged file  filename: '[name].dll.js'.// Global variable name exposed in vendor.dll.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 the following to package.json scripts:

"dll": "webpack --config build/webpack.dll.config.js".Copy the code

3. Run NPM run DLL to generate vendor-manifest.json under static/js;

4. In the build/webpack. Base. Conf. Plus in js:

  // Add the DllReferencePlugin
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
 }) ].Copy the code

5. Then import vendor.dll.js in index.html:

<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>
Copy the code

At this point, after configuration:

It can be seen that the time after NPM run build is greatly reduced and the dist package volume is smaller than before. In project optimization, it can greatly speed up the construction of the project and reduce the package volume of the project.

Sweep yards attention