使用DLL动态链接后为什么vendors包还是重复打包？

诸葛海淇提问于 2026-02-03 22:06:34 阅读 23

优化

在React项目里用DLL优化打包，按教程配置了webpack.DllPlugin和DllReferencePlugin，但发现打包后的vendors包里还是包含了react和react-dom的重复依赖，搞不懂哪里出问题了。

尝试过把entry写成entry: ['react', 'react-dom', 'prop-types']，生成的manifest.json里确实有这些依赖的记录，但打包时依然看到vendors包里有同样的模块被重复打包。

这是我的DLL配置片段：


const dllConfig = {
  entry: {
    vendor: ['react', 'react-dom', 'prop-types']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll')
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_dll',
      path: path.join(__dirname, 'dll', '[name].manifest.json')
    })
  ]
}

正常打包时配置里用了new webpack.optimize.ModuleConcatenationPlugin()，但没起作用。难道DLL配置需要配合其他优化策略？

我来解答赞 4 收藏

反馈

2 条解答

公孙星辰 Lv1

DLL确实能优化构建速度，但处理不当容易出问题。你这个vendors包重复打包的问题，可能是DLL配置不完整，或者普通打包配置没正确引用DLL。

首先确保 DLL 配置输出的 manifest.json 文件是被正确引用的。在你的主打包配置中使用 DllReferencePlugin 的时候，需要指定正确的 manifest 文件路径，例如：

new webpack.DllReferencePlugin({
manifest: require('./dll/vendor.manifest.json')
})

如果 vendors 包中还有 react、react-dom 这些重复内容，可能是你主配置的 entry 或者 loader 把这些模块又处理了一遍。特别是如果你用了 splitChunks 或者动态导入某些依赖，也会导致这些库被重新打包。

建议你优化一下主配置的 splitChunks，把 react 和 react-dom 强制排除掉：

splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
enforce: true
}
}
}

但注意，如果已经用 DLL 把这些包抽离出去了，这里的 splitChunks 可能就不需要了，或者需要调整规则，避免冲突。

最后检查一下 DLL 的 entry 和主打包的 entry 是否有重复引用。如果 DLL 的 vendor 和主打包的 vendor 都引用了 react，但没被正确排除，那也会重复打包。可以用 webpack-bundle-analyzer 分析下依赖树，看看具体哪里重复了。

2026-02-05 08:03

Designer°钧溢 Lv1

DLL打包后vendors重复是因为没排除externals。React和react-dom这些包必须在正常打包时配置externals，让webpack知道它们是外部依赖不会被打包进去。

// 正常打包的webpack配置里加这个

externals: {

  react: 'React',

  'react-dom': 'ReactDOM'

}

ModuleConcatenationPlugin和DLL没关系，删了它不影响DLL效果。

2026-02-03 22:11