如何在 Angular 应用程序中延迟加载库

Question

我们有一个包含许多外部库的 Angular 项目，该项目的大小逐渐增加到 10 MB，因此加载整个应用程序需要一些时间。

我们现在正在考虑将应用程序拆分为多个惰性加载模块。但是，所有教程都讨论将您的应用程序代码拆分为多个 JS 块，而不是根据使用它们的模块将 vendor.bundle.js 中包含的库拆分为多个块。仅仅拆分我们的应用程序代码不会给我们省去很多麻烦，因为外部库占了应用程序大小的大部分。

我们的应用程序所依赖的大多数库仅在单个模块中使用，因此将它们放在内部没有意义 vendor.bundle.js。我们如何拆分这个包，以便较小的供应商块将遵循延迟加载模块的结构？是否可以通过 Angular CLI 轻松做到这一点，或者它不是很常见，我们需要一些肮脏的技巧吗？

Answer 1

有很多方法可以动态添加 JavaScript 库。我在 Whosebug 上找到了一个有用的解决方案。

可以加载lazy模块主组件的OnInit库。有保证在库加载完成后可以hook初始化组件

Answer 2

我们发现，如果仅在单个延迟加载模块中需要这些库，它们会自动分成多个块。