concept

DLLPlugin and DLLReferencePlugin have achieved the separation of bundles in a way that greatly improves the speed of construction. Libraries that contain a large number of reusable modules and are not frequently updated are compiled only once and stored in specified files after compilation. These modules are not compiled later in the build process, and the DllReferencePlugin is used directly to reference the dynamically linked library code. This is typically used with common third-party modules such as React, React -dom, Lodash, etc. As long as these modules are not updated, these dynamically linked libraries do not need to be recompiled.

Abstract

Webpack DllPlugin plugin use has been introduced in this paper, and used AddAssetHtmlPlugin or HtmlWebpackIncludeAssetsPlugin will build good JS file is inserted into the HTML page

The code address

Github: Source code welcome exchange, Star!

Project directory

The general Webpack project setup process is not described in this article

myreact
|- /build
  |- webpack.config.js
  |- webpack.dll.conf.js
|- /dist
  |- dll
  |- js
|- /src
  |- index.js
|- package.json
|- index.html
Copy the code

Please see the figure below for the specific project structure

Let’s begin our DLL tour

Create webpack.dll. Conf.js (DllPlugin) in build directory

const webpack = require("webpack")
const path = require('path')
const CleanWebpaclPlugin = require('clean-webpack-plugin');
const resolve = (dir) => path.join(__dirname, '.. ', dir);

module.exports = {
  entry: {
    Use react, LoDash and other modules as entry points to build dynamic link libraries
    vendor: ['react'.'react-dom'.'react-router-dom'.'lodash']
  },
  output: {
    # specify the directory where the build file resides.
    # store them in the SRC folder
    path: resolve('public'),
    # specify filename
    library: '_dll_[name]'.The name of the global variable that holds the dynamic link library, for example lodash_dll_lib for lodash
    The name needs to correspond to the value of the name attribute in the DllPlugin plugin
    filename: 'dll/_dll_[name].[hash].js'
  },
  plugins: [
    new CleanWebpaclPlugin(['dll'], {
        root: resolve('public')
    }),
    new webpack.DllPlugin({
      name: '_dll_[name]'.The value is the name value in the manifest.json output
      path: path.join(__dirname, '.. /public/dll'.'[name].manifest.json')]}})Copy the code

Create webpack.base.conf.js with DllReferencePlugin

const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpaclPlugin = require('clean-webpack-plugin');
const resolve = (dir) => path.join(__dirname, '.. ', dir);

module.exports = {
    entry: './src/index.js',
    output: {
        path: resolve('dist'),
        filename: 'js/[name].[hash].js',
        library: '_dll_[name]'
    },
    plugins: [
        Exclude does not take effect
        new CleanWebpackPlugin(['dist'], {
          root: path.join(__dirname, '.. ')
        }),
        new HTMLWebpackPlugin({
            title: 'Use of the Webpak DllPlugin',
            template: resolve('index.html'),
            filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')}),Tell Webpack to use the dynamic link libraryNew webpack. DllReferencePlugin ({/ / describe lodash dynamic link library file content manifest: require (.. /public/dll/vendor.manifest')]}})Copy the code

3. Introduce dynamic link libraries in index. HTML files

Because dynamically linked libraries are compiled only once, unless the dependent tripartite library is updated and then not compiled, these modules are not included in the index.js file of the entry, so they are introduced separately in index.html.

Two kinds of schemes

  1. Manually add script, manually copy the packaged DLL folder to dist, trouble repeated, very uncomfortable
  2. Use add-asset-html-webpack-plugin or html-webpack-include-assets-plugin to insert HTML into the plugin

The add-asset-html-webpack-plugin and the html-webpack-include-assets-plugin are plugins for the add-asset-html-webpack-plugin and the html-webpack-include-assets-plugin. Add-asset-html-webpack-plugin is used in the project

Installation is much the same

npm install add-asset-html-webpack-plugin -D
npm install html-webpack-include-assets-plugin -D
Copy the code

There are similarities in usage

In the webpack.base.conf.js file

# add-asset-html-webpack-plugin. ; const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); module.exports = { ... , plugins: [ ...,# Add the given JS or CSS file to the webPack configuration file and put it into the resource list. The HTML WebPack plug-in is injected into the generated HTML.
        new AddAssetHtmlPlugin([
            {
                The absolute path to the file to add to the build
                filepath: path.resolve(__dirname,'.. /public/dll/_dll_vendor.js'),
                outputPath: 'dll',
                publicPath: 'dll',
                includeSourcemap: false)]}}]Copy the code
# html-webpack-include-assets-plugin. ; const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin'); module.exports = { ... , plugins: [ ...,# Add the given JS or CSS file to the webPack configuration file and put it into the resource list. The HTML WebPack plug-in is injected into the generated HTML.
        new HtmlWebpackIncludeAssetsPlugin([
            {
                assets: ['dll/_dll_vendor.js'],
                append: false)]}}]Copy the code

The difference between

index.html

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Love your cat hahaha 1111</title> </head> <body> <div id='root'></div>

</html>
<script type="text/javascript" src="dll/_dll_vendor.js"></script>
<script type="text/javascript" src="/js/runtime.830efec54753fd6ed91b.js"></script>
<script type="text/javascript" src="/js/vendors.830efec54753fd6ed91b.js"></script>
<script type="text/javascript" src="/js/app.830efec54753fd6ed91b.js"></script>
Copy the code

Run the project

 npm run build
Copy the code

View the files under the dist file

The related documents

Webpack Chinese