In the process of project development, the problem of packaging speed needs to be optimized. We can optimize the build speed by separating the form of the third library.

We often use jquery, Vue, Echarts and other third-party libraries in our projects. We can separate these third libraries from our own development code and just package them during the first build, so we don’t have to compile them later, which optimizes the speed of packaging.

basis

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

DllPlugin

This plugin creates a DLL only bundle(DLL-only -bundle) in an additional separate Webpack setup (typically webpack.dll.config.js). The plugin generates a file named manifest.json, which is used to map the DLLReferencePlugin to related dependencies.

Create a file named manifest.json under the given path. This file contains the mapping from require and import requests to module ids. The DLLReferencePlugin also uses this file.

DllReferencePlugin

This plug-in, set up in the WebPack main configuration file, references dlL-only bundles (s) to the required precompiled dependencies.

Map dependent names to module ids by referring to the DLL’s manifest file, and then require them as needed via the built-in __webpack_require__ function

with
output.librarykeep
nameThe consistency of.

Mode (Modes)

This plugin supports two patterns, scoped and mapped.

Scoped Mode

The contents of a DLL can be referenced under a module prefix. For example, with scope = “xyz”, a file named ABC in the DLL can be retrieved by require(“xyz/ ABC “)

Mapped Mode

The contents of the DLL are mapped to the current directory. If a required file matches a file in the DLL (after parsing), the file in the DLL will be used.

Since this happens after every file in the DLL has been parsed, the same path must ensure that users of the DLL bundle (not necessarily people, but some code) have access. For example, if a DLL bundle contains the loadash library and the ABC file, neither require(“lodash”) nor require(“./ ABC “) will be compiled into the main bundle, but will be used by DLLS.

Usage (Usage)

  1. Set up initial project
Directory structure: 

webpack.config.js        
webpack.dll.config.js        
src            
    index.html            
    pages                
    index.js    
static
    jquery.js    
package.jsonCopy the code

2. Introduce installation package jquery, WebPack, webpack-CLI 

npm install webpack webpack-cli html-webpack-plugin --save-dev    Copy the code
npm install jquery --save    Copy the code


3. Build a simple template to run the project 

var HtmlWebpackPlugin = require('html-webpack-plugin');var path = require('path');var webpackConfig = {        mode:'development'.entry: path.resolve(__dirname,'./src/pages/index.js'),        output: {                path: path.resolve(__dirname, './dist'),                filename: 'index_bundle.js'        },        plugins: [new HtmlWebpackPlugin({                template:path.resolve(__dirname,'./src/index.html')]}});module.exports = webpackConfig;Copy the code
4. Write mainfest code in webpack.dll.config.js 

const path = require('path')const webpack = require('webpack')module.exports = {    mode: 'development', entry: {// Define the entry file that packages public files in the program vendor.js vendor: ['jquery'],    },    output: {        path: path.resolve('./src/dll'),        filename: '[name].dll.js',        library: '[name]_[hash]',        libraryTarget: 'this'}, plugins: [new webpack.dllplugin ({// define the entry file vendor.js context: __dirname, // manifest.json file output location path: path.join('./src'.'dll'.'[name]-manifest.json'), // define the packaged public vendor file to expose the function name:'[name]_[hash]'})]} // First run webpack --config webpack.dll.config.jsCopy the code

5. Webpack.config. js modify the background code 


. plugins: [new HtmlWebpackPlugin({            template: path.resolve(__dirname, './src/index.html')}),/ / / / dllPlugin associated configuration of new code new webpack. DllReferencePlugin ({context: Manifest: require('./ SRC/DLL /vendor-manifest.json')}),].// Run webpack a second timeCopy the code

conclusion

The DllPlugin can be used to separate out third-party libraries and greatly speed up packaging