如何在Angular應用程序中延遲加載庫

Question

我們有一個Angular項目，其中包含許多外部庫，這些庫的大小逐漸增加到10 MB，因此加載整個應用程序需要一些時間。

現在，我們正在考慮將應用程序拆分為多個延遲加載的模塊。 但是，所有教程都討論將您的應用程序代碼拆分為多個JS塊，而不是根據使用它們的模塊將vendor.bundle.js包含的庫vendor.bundle.js為多個塊。 僅拆分我們的應用程序代碼不會為我們節省很多麻煩，因為外部庫構成了大多數應用程序大小。

我們的應用程序依賴的大多數庫僅在單個模塊中使用，因此將它們包含在vendor.bundle.js是沒有意義的。 我們如何拆分這個捆綁包，以便較小的供應商塊遵循延遲加載模塊的結構？ 是否可以通過Angular CLI輕松做到這一點，或者它不是很常見，我們需要一些骯臟的技巧？

Answer 1

有很多方法可以動態添加JavaScript庫。 我在stackoverflow上找到了一個有用的解決方案。

https://stackoverflow.com/a/42766146/7458082

您可以加載惰性模塊主要組件的庫OnInit。 可以肯定的是，您可以在庫加載后通過鈎子來初始化組件。

Answer 2

我們發現，如果僅在單個延遲加載的模塊中需要庫，則庫會自動在塊之間拆分。