Tutorial on using DLLPlugin and DLLReferencePlugin in webpack practice

Use of DLLPlugin and DLLReferencePlugin

DLLPlugin and DLLReferencePlugin use some method to split bundles, while also greatly improving the speed of the build.

1. First add the build folder ----:

var path = require("path");
var webpack = require("webpack");
 = {
 // Array of modules to be packaged entry: {
  vendor: ['vue/dist/','vue-router']
 },
 output: {
  path: (__dirname, '../static/js'), // Where to output the file after packaging  filename: '[name].',// The global variable name exposed in  library: '[name]_library' // Consistent with `name: '[name]_library',`. },
 plugins: [
  new ({
   path: (__dirname, '.', '[name]-'),
   name: '[name]_library', 
   context: __dirname
  }),
 ]
};

2. Add:

"dll": "webpack --config build/",

3. Run npm run dll to generate under static/js;

4. Add:

// Add DllReferencePlugin plugin plugins: [
  new ({
   context: __dirname,
   manifest: require('./')
  })
 ],

5. Then introduce it in:

<div ></div>
<script src="./static/js/"></script>

At this point, after configuration:

You can seenpm run buildThe time afterwards is greatly reduced, and the dist packaging volume is smaller than before. In project optimization, the construction speed of the project can be greatly accelerated and the packaging volume of the project can be reduced.

Summarize

The above is the tutorial on using DLLPlugin and DLLReferencePlugin that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply you in time!