为什么依赖在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依赖项？

我发现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） - ＆gt;布尔，     //在将模块移入commons块之前需要包含模块的最小块数。     //数字必须大于或等于2且小于或等于块数。     //传递Infinity只会创建公共块，但不会移动任何模块。     //通过提供function，您可以添加自定义逻辑。 （默认为块数）

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

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

"Extra async commons chunk"中进一步描述了这种用法。

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

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

Answer 2

虽然我不知道确切地解决了什么问题，但我只是注意到，最新版本的Atlaskit现在可以与摇树一起使用。现在，在一个大vendor.js中，与Atlaskit共享的所有东西都得到的工件很少。