Webpack 性能优化：DLL 插件用法详解
本文详解 Webpack 中通过 DLLPlugin 分离第三方库（如 React、Lodash）以提升打包性能的方法。对比 CommonsChunkPlugin，介绍 DLLPlugin 的配置流程，并推荐使用 DllLinkPlugin 插件简化 manifest 管理，实现自动更新与生成 vendors 文件。
前言
Webpack 分离第三方库方案对比
在使用 Webpack 进行项目打包时，针对那些更新频率较低的第三方库（例如 React、Lodash），我们通常希望将其与业务代码分离。目前 Webpack 社区提供了两种主要的解决方案。
- CommonsChunkPlugin
- DLLPlugin
对于 CommonsChunkPlugin，Webpack 在每次打包时仍需处理这些第三方库，其作用仅在于将打包后的第三方库与业务代码分开存放。而 DLLPlugin 则能将第三方代码完全独立出来，使得每次打包仅处理项目自身的业务代码。
DLLPlugin 配置与使用
用法
要使用 DLLPlugin，需要额外新建一个配置文件。因此，采用这种方式打包的项目通常包含以下两个配置文件：
- webpack.config.js
- webpack.dll.config.js
首先查看 webpack.dll.config.js 的配置内容。
const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
entry: {
vendors: ['react', 'lodash']
},
output: {
filename: '[name].dll.js',
path: 'dist/',
library
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'dist/[name]-manifest.json'),
// This must match the output.library option above
name: library
}),
],
}
接着修改 webpack.config.js 文件。
const webpack = require('webpack')
module.exports = {
entry: {
app: './src/index'
},
output: {
filename: 'app.bundle.js',
path: 'dist/',
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/vendors-manifest.json')
})
]
}
manifest: require('./dist/vendors-manifest.json') 这里的路径必须与 webpack.dll.config.js 中的配置保持一致。
随后执行以下命令进行打包：
$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js最后，在 HTML 文件中按如下方式引用生成的脚本：
<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>使用 DllLinkPlugin 简化配置
DLL Link Plugin
上述用法存在不便之处，例如在 webpack.config.js 中需明确指出对应的 manifest.json 文件。此外，当 DLL 需要更新时（如 react 升级或新增第三方库），需手动执行如下编译操作：
$ webpack --config webpack.dll.config.js鉴于上述问题，基于官方的 DllReferencePlugin，我编写了一个打包插件：Dll Link Plugin。
使用该插件，只需对 webpack.config.js 进行少量修改。
const webpack = require('webpack')
const DllLinkPlugin = require('dll-link-webpack-plugin')
module.exports = {
// ...
plugins: [
new DllLinkPlugin({
config: require('webpack.dll.config.js')
})
]
}
直接替换掉 DllReferencePlugin，并传入对应的 DLL 配置文件即可。每次打包时，只需运行：
$ webpack --config webpack.config.js执行上述命令后，系统将自动生成对应的 vendors 文件；当需要更新时，也会自动完成更新。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
JS中Array、Set与Map的区别及应用场景选择
2026-11-05 16:03:02
PixiJS 常见报错排查：纹理跨域、黑屏与内存泄漏解决
2026-11-05 10:05:21
JS数组find与filter取值区别及性能对比
2026-11-05 08:39:21
通过添加时间戳参数强制刷新JS资源
2026-11-05 08:32:36
JavaScript 快速排序的迭代写法与非递归优化
2026-11-03 22:39:58