DllPlugin 通过预编译第三方依赖为 DLL 并配合 DllReferencePlugin 引用，跳过重复构建流程以提升速度；需分步配置 DLL 构建与主构建引用，注意版本更新同步、Git 忽略 DLL 文件及 HMR 限制。
Webpack 的 DllPlugin 是一种通过“预编译第三方依赖”来显著提升构建速度的优化手段，特别适合中大型项目中频繁变动业务代码但第三方库（如 React、Vue、Lodash）相对稳定的情况。
DllPlugin 的核心原理
它将不变或极少更新的模块（如 node_modules 中的包）提前打包成一个或多个独立的动态链接库（DLL），生成对应的 manifest.json 文件。后续构建时，Webpack 通过 DllReferencePlugin 直接从 DLL 中引用模块，跳过解析、加载、编译等重复流程，大幅减少构建耗时。
实际配置步骤
需分两步操作：先构建 DLL，再在主构建中引用。
- 第一步：创建 dll.config.js，单独配置 Webpack 打包第三方库：
entry: {
react: ['react', 'react-dom'],
vendor: ['lodash', 'axios', 'moment']
},
output: {
path: path.resolve(__dirname, 'dll'),
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname, 'dll', '[name].manifest.json'),
name: '[name]_library'
})
]
};
-
第二步：运行构建 DLL：
webpack --config dll.config.js，生成react.dll.js和react.manifest.json等文件； - 第三步：在主 webpack.config.js 中引入 DllReferencePlugin：
new webpack.DllReferencePlugin({
manifest: require('./dll/react.manifest.json')
}),
new webpack.DllReferencePlugin({
manifest: require('./dll/vendor.manifest.json')
}),
// 注意：还需用 html-webpack-plugin 将 dll.js 注入 HTML
new HtmlWebpackPlugin({
template: './src/index.html',
dllFiles: ['dll/react.dll.js', 'dll/vendor.dll.js']
})
]
- 第四步：确保 HTML 正确加载 DLL 脚本，通常通过 script 标签在 body 底部引入，顺序不能错（先 dll，后主 bundle）。
使用注意事项
DLL 不是“一劳永逸”，需注意以下关键点：
立即学习“Java免费学习笔记（深入）”；
- 当升级或更换第三方库版本时，必须重新运行 DLL 构建命令，否则 manifest 与实际 DLL 不匹配会导致运行时报错；
- DLL 文件应加入 Git 忽略（如 .gitignore 添加
/dll/），避免提交二进制产物，但.manifest.json建议保留，便于 CI/CD 环境复现； - 不适用于开发环境热更新（HMR）极敏感的场景——DLL 模块修改后需手动重建，会中断 HMR 流程；
- Webpack 5 内置的 cache 和 module federation 在某些场景下可替代 DllPlugin，但对 Webpack 4 或需精细控制构建链路的项目，DllPlugin 依然高效可靠。
效果验证方式
启用前后对比构建日志中的 “modules” 数量 和 “compilation.modules.size” 可明显看到下降；也可用 webpack-bundle-analyzer 查看依赖图谱，确认 vendor 模块已从主 bundle 中剥离。
