Webpack DLL打包后为啥还是重复打包lodash？

司徒正毅提问于 2026-03-14 22:31:22 阅读 47

工具

我用 Webpack 的 DLLPlugin 把 lodash 打包进 vendor.dll.js 了，但主构建里还是把 lodash 又打了一遍，体积根本没减下来。明明配置里加了 externals 和 manifest 引用，是不是哪里漏了？

这是我的 dll 配置片段：

new webpack.DllPlugin({
  name: 'vendor',
  path: path.join(__dirname, 'dist', 'vendor-manifest.json'),
  context: __dirname,
})

Plugin

我来解答赞 5 收藏

反馈

1 条解答

清梅 Dev Lv1

兄弟，我之前也被这个坑过，说白了就是主bundle那里没配置externals。

你dll配置没问题，但主webpack配置里漏了两个关键东西：

第一，得加 DllReferencePlugin 来引用那个 manifest：

// webpack.config.js 主配置

new webpack.DllReferencePlugin({

  manifest: require('./dist/vendor-manifest.json'),

})

第二，也是最容易漏的，得把 lodash 标记为 external，告诉 webpack 这玩意儿不要打包：

// webpack.config.js

externals: {

  'lodash': 'lodash'

}

这两步缺一个都不行，我就曾经只加了 externals 没加 DllReferencePlugin，结果构建直接报错，后来两个都加了以为完事了，结果体积还是没减，才知道 externals 没生效——因为 import 的方式不对。

如果你用的是 ES6 import：

import _ from 'lodash'

那就按上面的写法没问题。但如果你用的是 CommonJS 或者通过别名引入的，可能得调整一下写法。

还有个坑要注意：如果你的主 bundle 里用了 ProvidePlugin 自动注入 lodash，也会导致它被重复打包，记得检查一下。

你先把这俩配置加上，十有八九就解决了。

2026-03-17 13:08