代码之家 › 专栏 › 技术社区 › livthomas

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

lazy-loading angular

livthomas · 技术社区 · 6 年前

我们有一个有许多外部库的角度项目,它的大小逐渐增长到10 MB,因此加载整个应用程序需要一些时间。

我们现在正在考虑将应用程序拆分为多个延迟加载模块。然而,所有教程都谈到将应用程序代码拆分为多个JS块,而不是拆分中包含的库 vendor.bundle.js 根据使用的模块分为多个块。仅仅拆分应用程序代码不会为我们节省太多麻烦,因为外部库构成了应用程序的大部分大小。

我们的应用程序所依赖的大多数库只在单个模块中使用,因此将它们放在其中没有任何意义 小贩捆js公司 。我们如何拆分此捆绑包,以便较小的供应商区块将遵循延迟加载模块的结构?通过Angular CLI可以轻松做到这一点吗?还是不是很常见,我们需要一些肮脏的黑客?

2 回复 | 直到 6 年前

livthomas 6 年前

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

Basavaraj Bhusani 6 年前

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

您可以在惰性模块的主要组件的单元上加载库。有一个承诺,您可以在加载库后钩住以初始化组件。

推荐文章

M'sieur Toph' · Angular 5-在组件内部获取懒散加载的模块根路径

6 年前

gooamoko · 我可以用lazy init使用RmiServiceExporter吗?

6 年前

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

6 年前

Sameer · 为延迟加载的模块创建公共模块

7 年前

Mohammad Shadmehr · 为什么我必须在Linq查询中包含其他实体?

7 年前

Anika · 调用onCellEdit时,DataTable的RowKey为null

7 年前

Philip Feldmann · 帆。js延迟加载模型

7 年前

Perp · 如何将Web包中的节点模块与异步块分离?

7 年前

Bob Ramsey · 需要关于延迟加载mat手风琴内容的帮助

7 年前

JSON · 如何将子组件设置为路由器出口的默认路由?[副本]

7 年前