使用React + Webpack進行單頁面應用程序的文件大小問題

Question

我正在使用React + Redux + Webpack開發單頁面應用程序。的WebPack是包裝所有的東西很好的工具，但我不能想出一些PT 我的應用程序只是構建一個父頁面，一旦用戶選擇從頂部菜單的功能，具體功能將推出作爲選項卡容器和標籤中的一個新標籤本身需要互動。比方說當選項卡A完成某件事情時，選項卡B必須刷新部分信息。

我起草的想法是，每一個功能是陣營的BIG組分和其功能（組件）應追加到標籤容器的父組件的控制。但我想象如果我使用Webpack將整個應用程序捆綁到1個.js文件中，那麼問題可能會出現，即使我將供應商源代碼包拆分爲外部資源，.js文件的大小也會非常龐大​​。

我相信它是使用的WebPack而且應該有更好的辦法來解決這個單頁應用常見問題。

敬請糾正我，如果我的任何濫用陣營+的WebPack

Answer 1

當的WebPack編譯/捆綁在生產模式下的代碼會比束尺寸您目前看到的要小得多。另外如果您擔心，請查看與React API兼容的Preact（https://preactjs.com/），但要小得多

Answer 2

Webpack支持可用於按需加載代碼的動態導入，例如，當頂級標籤打開時。這樣，你的初始js包保持很小，應用程序可以很快啓動。

https://webpack.js.org/guides/code-splitting/#dynamic-imports