爲什麼依賴在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工件中重複多次？

回答

相關問題