随着项目复杂度的提升，react、react-dom、react-route等一系列框架的引入，再加上babel-preset-es2015、babel-preset-react等一系列插件，webpack变得越来越慢。webpack提供了DllPlugin和DllReferencePlugin插件可以让构建速度飞起来。

DllPlugin

这个插件专门用于单独的webpack配置来创建一个dll-only-bundle。 它创建一个manifest.json文件，由DllReferencePlugin用于映射依赖关系。如下所示创建一个使用DllPlugin插件的webpack.vendor.dev.config.js文件：

//webpack.vendor.dev.config.js
var path = require('path');
var webpack = require("webpack");
module.exports = [{
    name: "vendor-dev",
    entry: {
        vendor: [path.join(__dirname, "src", "vendor.js")]
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "[name].bundle.js",
        library: "[name]"
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, "src", "dll", "[name]-manifest.json"),
            name: "[name]",
            context: __dirname
        })
    ],
    module: {
        rules: [{
            test: /\.js|jsx$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react']
                }
            }]

        }]
    }
}]
//src/vendor.js
require("react");
require("./lib/jquery-3.2.1.min.js");

上面的配置会在src/dll中创建一个vendor.manifest.json文件并写入包含从require和import请求到模块ID的映射，同时在build中创建一个vendor.bundle.js文件，在vendor.bundle.js内部会根据 output.library选项将dll函数暴漏给全局变量vendor。

DllReferencePlugin

这个插件在主webpack配置中使用，它引用了dll-only-bundle来包含预先建立的依赖关系。

//webpack.dev.config.js
var path = require('path');
var webpack = require("webpack");

module.exports = [{
    name: "dev",
    entry: {
        app:[path.join(__dirname, "src", "entry.js")]
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "[name].bundle.js"
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./src/dll/vendor-manifest.json")
        })
    ],
    module: {
        rules: [{
            test: /\.js|jsx$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react']
                }
            }]

        }]
    }
}]
//src/entry.js
var react = require("react");
console.log(react);

var $ = require("./lib/jquery-3.2.1.min.js");
window.$ = window.jQuery = $;
console.log($);

在构建src/entry.js的过程中遇到react、jquery-3.2.1.min.js将会根据vendor-manifest.json清单文件来将依赖名称映射到模块ids。

运行

在项目package.jsonscripts字段中增加如下配置：

"scripts": {
    "vendor:dev": "webpack --config webpack.vendor.dev.config.js --progress --colors",
    "dev": "npm run vendor:dev && webpack --config webpack.dev.config.js --watch --progress --colors",
},

运行npm run dev，结果如图所示：

github示例：https://github.com/leibnizli/webpack-dll-demo

dll-plugin api：https://webpack.js.org/plugins/dll-plugin

Related Posts