为什么 Webpack 神器中会重复多次依赖？

Question

我有一个多入口点 webpack 构建，我正在为生产优化工件大小。 webpack-bundle-analyzer 产生了如下图片：

很明显，AtlasKit 依赖项占工件总大小的很大一部分。具体来说，我看到 styled-components.es.js 重复了很多次。更重要的是，这种相同的依赖性也存在于 vendor.js 中，它本身在所有其他包之间共享。

谁能解释为什么 styled-components.es.js 到处重复，为什么它不能通过 vendor.js 中的单一依赖项共享？有什么我可以做的来删除重复项并且只依赖于 vendor.js 中的单个 styled-components.es.js 依赖项吗？

我觉得有点奇怪，AtlasKit 依赖项有一个嵌套的 node_modules 文件夹包含在包中。为什么 dist 不够？也许这就是 styled-components.es.js 无法通过 vendor.js 共享的部分原因？

我试图通过 webpack 的 IgnorePlugin（类似于 moment.js 语言环境）手动排除依赖项，但到目前为止没有成功。

如有任何见解，我们将不胜感激。谢谢！

Answer 1

听起来您想将来自多个块的依赖项合并到一个公共块中：为此，我建议您查看 webpack.CommonsChunkPlugin。

特别感兴趣的是 minChunks 属性您可以传递给插件：

minChunks: number|Infinity|function(module, count) -> boolean, // The minimum number of chunks which need to contain a module before it's moved into the commons chunk. // The number must be greater than or equal 2 and lower than or equal to the number of chunks. // Passing Infinity just creates the commons chunk, but moves no modules into it. // By providing a function you can add custom logic. (Defaults to the number of chunks)

我建议尝试将此插件添加到您的 Webpack 配置中：

new webpack.optimize.CommonsChunkPlugin({
  children: true,
  async: true,
  minChunks: 3
})

此用法在 "Extra async commons chunk" 中有进一步描述。

如果您有兴趣查看块之间共享的代码量，请考虑也尝试 samccone/bundle-buddy Webpack。

如果您已经在使用 CommonsChunkPlugin，我需要查看您的 Webpack 配置以提供更多信息。

Answer 2

虽然我不知道究竟是什么解决了这个问题，但我只是注意到最新版本的 Atlaskit 现在可以使用 tree-shaking。我现在在一个大 vendor.js.

中获得了从 Atlaskit 共享的所有内容的最小工件

为什么 Webpack 神器中会重复多次依赖？

Why is dependency repeated many times in Webpack artifact?

javascript

webpack

styled-components

atlaskit