写作不易，未经作者允许禁止以任何形式转载！
如果觉得文章不错，欢迎关注、点赞和分享！

[打包优化]Webpack DLL (juejin.cn)

认识DLL库

什么是DLL
- DLL全称是动态链接库(Dynamic Link Library)，是为软件在Windows中实现共享函数库的一种实现方式;
- 那么webpack中也有内置DLL的功能，它指的是可以将可以共享，并且不经常改变的代码，抽取成一个共享的库;
- 这个库在之后编译的过程中，会被引入到其他项目的代码中，减少的打包的时间;
DDL库的使用分为两步:
- 第一步:打包一个DLL库;
- 第二步:项目中引入DLL库

DLL打包

webpack内置DllPlugin帮助生成DLL文件

webpack.common.js
- context：执行上下文，
- entry：
  - key：name（placeholder）
  - value：要打包的包名
- output（常规）
- plugins
  - DllPlugin
    - name：定义生成dll文件的名称
    - path：生成dll文件的文件路径

const path = require("path");
const {DllPlugin} = require("webpack");
const {merge} = require("webpack-merge")

const commonConfig = (isProduction)=>{
    return {
        context: path.resolve(__dirname, "../"),
        entry: {
            react:["react","react-dom"]
        },
        output: {
           path:path.resolve(__dirname,"../dll"),
            filename:"dll_[name].js",
            library:"dll_[name]"
        },
        plugins: [
            new DllPlugin({
                name:'[name].manifest.json',
                path:path.resolve(__dirname, "../dll/[name].manifest.json")
            })
        ],
    }
}
const devConfig = require('./webpack.dev')
const prodConfig = require('./webpack.prod')

module.exports = function (env) {
    const isProduction = env.production;
    process.env.NODE_ENV = isProduction ? "production" : "development"

    const config = isProduction ? prodConfig : devConfig
    return merge(commonConfig(isProduction), config)
}

打包完成后，在根目录下会有一个dll文件夹，内有Dll文件和相应manifest.json文件。

DLL使用

如果我们的代码中使用了react、react-dom，有配置splitChunks的情况下，他们会进行分包，打包到一个独立的chunk中。
- 但是现在有了dll_react，不再需要单独去打包它们，可以直接去引用dll_react即可:
- 第一步:通过DllReferencePlugin插件告知要使用的DLL库;
- 第二步:通过AddAssetHtmlPlugin插件，将打包的DLL库引入到Html模块中;

new DllReferencePlugin({
    context:path.resolve(__dirname, "../"),
    manifest:path.resolve(__dirname,"../dll/react.manifest.json")
}),
new AddAssetHtmlWebpackPlugin({
    outputPath:"../build/js",
    filepath:path.resolve(__dirname, "../dll/dll_react.js")
})