javascript - 为什么在 Webpack 工件中依赖重复多次？

Question

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

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

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

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

我试图通过 webpack 的 IgnorePlugin 手动排除依赖项（类似于moment.js语言环境），但到目前为止未能这样做。

任何见解将不胜感激。谢谢！

Answer 1

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

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

minChunks: number|Infinity|function(module, count) -> boolean, // 在将模块移动到公共块之前需要包含模块的最小块数。// 数量必须大于等于 2 且小于等于 chunk 的数量。// 传递Infinity只会创建公共块，但不会将任何模块移入其中。// 通过提供一个function你可以添加自定义逻辑。（默认为块数）

我建议尝试将此插件添加到您的 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 共享的所有内容获得最少的工件。