What to do with the dllPlugin

Typically our code is divided into two parts, business code (build) and third-party libraries (ventOR). Webpack packages both parts during processing, but third-party libraries are generally stable, and in this case, it is not necessary to package stable third-party libraries multiple times. DllPlugin helps us package the third-party library into a single file (ventor.js), and the packaged business code (build.js) references the third-party library from the ventor.js file. This way, we don’t need to repackage third-party libraries every time we repackage, optimizing the speed of packaging.

How to configure

Module. exports = {entry: {ventor: ['react', 'react-dom'] // Array, webpack can package multiple packages into a chunk file}, output: {path, filename, library: '[name]' // need to be the same as dllplugin. name}, plugins: [new webpack.dllplugin ({name: '[name]' // Packaged mapping configuration name, path: path.resolve(__dirname, '/manifest.json') // mapping configuration file package output address})]} // according to the above configuration will package a chunk file and mapping file // chunk file code similar to let ventor; // The variable name is 🈶️output.library. Function () {const modules = {'react': Function (module, exports, require) {// reactku code}, 'react-dom': Function (module, exports, require) {// reactku code}} function require(moduleId) {const module = {exports: {}}; modules[moduleId](module, exports, require) return module.exports; } ventor = require; })() // manifest.json {name: 'ventor', // Generated according to dllplugin.name, use content: {// mapping set,key is the name path of the third party package referenced by the business code. Value of modules' key ' 'react': 'react', 'react-dom': 'react - dom'}} / / packaging business code configuration module exports = {plugins: [new webpack. DllReferencePlugin ({manifest: Require ('manifest.json') // reference the packaged mapping file})]} // According to the above configuration, will package the business code like the following // suppose the import file code is: import React from 'React '; (function() { const modules = { 'index.js':function(module, exports, webpack_require) { const React = webpack_require('react') }, 'react': Function (module, exports, webpack_require) {// reference ventor.js to the ventor.js export function. Load third-party packages // ventor variable corresponding to the name field of manifest.json. Module. Exports = ventor('react'); } } function webpack_require(moduleId) { const module = { exports: {} }; modules[moduleId](module, exports, require); return module.exports; } webpack_require('index.js') // execute entry file})()Copy the code

Reference documentation

Segmentfault.com/a/119000001…