webpack配置插件-DllPlugin和DllReferencePlugin

[cloudtian]

DllPlugin和DllReferencePlugin

DllPlugin和DllReferencePlugin用某种方法实现了拆分bundles，分离出第三方库和自己编写的代码，同时大大提升构建速度。

使用场景：项目中使用到的第三方库文件，我们一般都不会频繁的修改，所以可以将其单独打包，只在第一次打包时打包第三方库，之后打包时都只需要打包我们自己编写的代码，可以提升构建速度。

DllPlugin DllPlugin插件会生成一个名为manifest.json的文件，这个文件是用来让DllReferencePlugin映射到相关的依赖上去的。

• context(optional): manifest文件中请求的上下文（默认值为webpack的上下文）
• name: 暴露出的dll的函数名（[name] & [hash]）
• path: manifest.json文件的绝对路径（输出文件）

配置webpack.dll.js:

const webpack = require('webpack');
const path = require('path');

const dllEntry = {
    vue_all: ['vue', 'vue-router'],
    babel_runtime: ['@babel/polyfill']
};

module.exports = {
    mode: 'production',
    entry: dllEntry,
    output: {
        path: path.join(__dirname, 'dist', 'dll'),
        library: `[name]_library`,
        filename: `[name].dll.js`
    },
    plugins: [
        new webpack.DllPlugin({
            name: `[name]_library`, // 该处name需要与output中的library一致
            path: path.join(__dirname, 'dist', 'dll', `[name]_manifest.json`)
        })
    ]
};

然后运行webpack --config webpack.dll.js就可以生成依赖库的源码和匹配id。 接下来如何引用，就需要在webpack.config.js添加DllReferencePlugin配置了。

DllReferencePlugin DllReferencePlugin这个插件是在webpack主配置文件中设置的，这个插件通过关联manifest.json把单独打包第三方库生成的dll文件引入进来。

• context: (绝对路径) manifest中请求的上下文
• manifest: manifest.json文件的绝对路径
• content(optional): 请求到模块id的映射（默认为manifest.content）
• name(optional): dll暴露的地方的名称（默认为manifest.name）
• scope(optional): dll中内容的前缀
• sourceType(optional): dll是如何暴露的

配置webpack.config.js：

const webpack = require('webpack');
const path = require('path');

const dllEntry = {
    vue_all: ['vue', 'vue-router'],
    babel_runtime: ['@babel/polyfill']
};

module.exports = {
    //...其他配置省略
    plugins: [
        ...Object.keys(dllEntry).map(name => {
            return new webpack.DllReferencePlugin({
                manifest: require(path.join(__dirname, 'dist', 'dll', `${name}_manifest.json`))
            });
        });
    ]
};

例子： 未使用插件的webpack-demo地址: init地址 webpack-demo引入了lodash第三方库

直接打包生成的index.js文件大小有495KB: index.js
构建bundle花费时间1802ms

使用插件后webpack-demo地址: 分支地址 使用插件分离lodash后，生成的index.js文件大小只有18.1KB了 index.js
构建manifest.json文件花费时间289ms

构建bundle花费时间1122ms