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

我有一个多入口点webpack构建，我正致力于优化生产的工件大小。 webpack-bundle-analyzer产生如下图：为什么依赖在Webpack工件中重复多次？

很明显的是，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语言环境），但至今未能如愿。

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

来源

2017-09-15 tobi

你有没有找到这个决议？有同样的问题，我以为我只是在webpack坏，但似乎有什么奇怪的配置@atlaskit –

@MitchLillie不幸的是我没有，我停止投入更多的时间在这个。但是，如果我再次找到一些时间，我想更多地进行调查。我仍然相信应该有一个解决方案。 – tobi

这听起来像你想要从多个块合并成一个共同块的依赖关系：为此，我会建议看看webpack.CommonsChunkPlugin。

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

minChunks：号码|无限|功能（模块，计数） - >布尔， //这就需要大块的最低数量在模块移入公共块之前包含模块。 //数字必须大于或等于2并且小于或等于块的数量。 //传递Infinity只是创建公用块，但不会将模块移入其中。 //通过提供function，您可以添加自定义逻辑。（默认为块的数目）

我建议尝试这个插件添加到您的WebPack配置：

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

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

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

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

来源

2017-09-15 02:11:45 Peter

嗨，彼得，谢谢你的回复。我已经在使用CommonsChunkPlugin，这就是我如何获得'vendor.js'。你可以在这里看到我的Webpack配置：https://pastebin.com/vgiQrPqs – tobi

感谢您发布您的配置。我怀疑你并没有真正从“@ atlaskit”中摆脱树木，因为你正在导入已经编译好的代码。它看起来不像'@ atlaskit'支持''module''字段，它可以让你把它作为一个ES模块使用。 Atlassian Kit似乎随附一个指向其原始源代码的密钥“”ak：webpack：raw“：”src/index.jsx“”。您可以使用['This 2ality post']（http://2ality.com/2017/06/pkg-esnext.html#package-users）“中描述的过程从此入口点加入。他们应该使用“模块”字段，而不是'ak：webpack：raw' – Peter

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

回答

相关问题