模塊捆綁與加載 - 僅提供客戶需要的模塊

Question

我們最近已將其遷移到我們的Angular 1.x項目中使用TypeScript，並且正在使用Webpack進行模塊捆綁，使我們能夠生成源代碼的串聯版本包括在我們的index.html頁面中。

我們一直在謹慎地遵循最佳實踐，當談到modularising我們的角度應用，下面約翰爸爸的風格指南等的喜歡

我一直在琢磨最近的事實是，我們所有的角特徵模塊被捆綁在webpack爲我們創建的最終文件中。

根據帳戶權限設置（我們在登錄時讀入），登錄到應用程序的用戶不一定會被允許訪問所提供的所有功能。如果用戶只能訪問5個功能中的2個，那麼在他們的瀏覽器中下載的源代碼將仍然包含開發的全部功能（是的，我們確實忽略了我們的源代碼）。

我已經看到模塊加載器提到並想知道這些可以用於服務客戶端需要什麼，因爲他們在應用程序中導航？

因此，在加載應用程序時，他們只會獲得最低需要的核心模塊\功能。讓他們到導航等主頁

然後，當他們點擊到他們有權訪問的功能區域，可能只有那些相關的模塊源被拉下來，也許緩存以供稍後重訪？

我意識到這最終會有更多的網絡請求，但初次訪問應用程序的初始負載會快很多？

我對模塊捆綁和加載相當陌生，我想我對差異有基本的瞭解。當涉及到這種事情時，其他人使用什麼方法？

感謝

Answer 1

我想你不會找到一個最好的答案。你會聽到的所有：這取決於。

例如：

• 如果你有一個完整的模塊，應用程序，動態加載的飛行和初始加載時間是至關重要的 - 去與systemjs /熱蒙。
• 如果響應速度絕對至關重要 - 請使用webpack。

有關於這個問題的一些不錯的比較/討論：here，here，或here，更多的人 - 但底線是 - 你必須評估並作出自己明智的決定。