如何在Angular应用程序

Question

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

我们现在考虑将应用程序拆分为多个延迟加载的模块。但是，所有教程都讨论将应用程序代码拆分为多个JS块，而不是将vendor.bundle.js中包含的库拆分为多个块，这些块基于使用它们的模块。分割我们的应用程序代码不会给我们带来太多麻烦，因为外部库构成了大部分应用程序的大小。

我们的应用程序所依赖的大多数库仅在单个模块中使用，因此将它们放在vendor.bundle.js中是没有意义的。我们如何拆分这个包，以便较小的供应商块将遵循延迟加载模块的结构？是否可以通过Angular CLI轻松完成此操作，还是不常见，我们需要一些肮脏的黑客攻击？

Answer 1

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

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

您可以加载惰性模块主要组件的库OnInit。有希望你可以在加载库之后挂钩来初始化组件。

Answer 2

我们发现如果只在一个延迟加载的模块中需要它们，那么库会自动在块之间拆分。