本文将指导如何使用 DllPlugin 加速 webpack 构建。

为什么

Vue-webpack-multi 工程中,如果想抽出公共部分,可以使用 CommonsChunk 插件完成。它会把 vue 等公共部分打包为 vendor,每个页面引入 vendor.js。但依然会存在一些问题:

  • 每次 build 会打包 vendor,耗时
  • 有些 module 更新缓慢,有些 module 更新频繁,导致客户端经常下载很大的 vendor.js

那么,如果有上述问题,可以引入 DllPlugin 抽出那些公用的,更新频度低的模块。思路类似与 windows 的 dll 文件。

怎么做

1、添加 webpack.dll.config.js 文件,这一步是为了告诉 DllPlugin 哪些文件需要抽出来,以及生成 manifest.json 配置文件。

const path = require("path");
const webpack = require("webpack");
module.exports = {
// 这里是哪些module需要抽出来
entry: {
vendor: ["vue-router", "vuex", "fastclick", "axios"]
},
output: {
path: path.join(__dirname, "../static/js"),
filename: "[name].dll.js",
library: "[name]_library"
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, ".", "[name]-manifest.json"),
name: "[name]_library"
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: '"production"'
}
})
]
};

2、在 webpack.prod.config.js 文件中添加引用:DllReferencePlugin

plugins: [
// ...
// 加入插件,让webpack使用dll
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, ".."),
manifest: require("./vendor-manifest.json")
})
// ...
];

3、在 package.json 文件中加入 scripts:

"build:dll": "webpack --config build/webpack.dll.conf.js --progress",

4、运行:

npm run build:dll

会在 static/js 目录下生成 vendor.dll.js。到此可以把文件加入 html 文件使用了。

5、更进一步

是的,以上配置并不会在 html 中自动插入 vendor.dll.js。那么,我们还需要另一个插件 AddAssetHtmlPlugin 来完成这个任务。

  • 首先引入依赖

    npm i add-asset-html-webpack-plugin -D
  • 在 webpack.prod.config.js 文件中添加引用:AddAssetHtmlPlugin

    plugins: [
    // ...
    // 加入插件,让webpack使用dll
    new webpack.DllReferencePlugin({
    context: path.resolve(__dirname, ".."),
    manifest: require("./vendor-manifest.json")
    }),
    // 复制公共dll.js,并插入html
    new AddAssetHtmlPlugin([
    {
    filepath: path.resolve(__dirname, "../static/js/vendor.dll.js"), // 同webpack.dll.conf.js output
    outputPath: utils.assetsPath("js"),
    publicPath: path.posix.join(config.build.assetsPublicPath, "static/js"),
    includeSourcemap: false,
    hash: true
    }
    ])
    // ...
    ];

    这时,再次运行

    npm run build

    html 已自动引入 vendor.dll.js。

    <script type="text/javascript" src="/live/static/js/vendor.dll.js?9052a4023ee8f3900f3a"></script>
    <script type="text/javascript" src="/live/static/js/vendor.9da0e0be7a97a0e0034e.js"></script>
    <script type="text/javascript" src="/live/static/js/embed/room.eb30321a94ba3c461902.js"></script>

参考: