使用懒惰的加载模块加快角度应用程序

0

如何使用懒惰加载模块更快地渲染角度应用程序?

延迟加载模块是Angular 10的一个特征,其中第一次导航时,您的功能将加载。此功能会减少对用户发送的应用程序束’s browser.

但是懒惰的装载已经由角度8提供? ?

是的,延迟加载的想法已经在Angular 8中给出。但现在更具体地与浏览器’s API in Angular 10.

一般来说,角度 NG.modules. 被热切地装满了。每当应用程序都会加载那么所有的 NG.modules. 将立即加载。在项目的初始阶段,您不会感受到这种传统行为的效果。但随着时间的推移,当你的应用程序大而且加载更多功能时。

然后,您将显然觉得页面负载随着我们预期的应用程序。在这种情况下,懒惰的装载是为你提供的。它有助于只需要加载 NG.modules. instead of all.

使用懒惰的加载模块加快角度应用程序
如何使用延迟加载模块更快地渲染角度应用程序

我还写了一篇文章 获取大数据 在角度应用。本文有助于您以三种优化的方式优化角度应用。

好的,那么我怎么能实现这个? ?‍♂️

在转到代码之前,我想在一个名为的概念上点亮 动态导入。

根据 v8.dev

动态导入()引入了一种类似于导入的新功能,可解锁与静态导入相比的新功能。

自Import()以来返回承诺’可以使用异步/等待而不是基于那时的回调样式。

动态导入API. 是一个基于承诺的标准浏览器API。它让我们访问模块,从模块到哪里’可以调用s课程。

好吧,现在让’S转到实施部分:

首先,创建一个角度项目(我不’认为我必须告诉如何使用CLI创建角度项目。如果你不’知道那么抱歉请谷歌它。)

现在创造一个 特征 模块 你的功能。

对于这种情况,我正在创建一个 管理模块。 


在此之后添加特征模块的子组件。

现在使用LoadChildren向您的组件添加翅膀。

loadchildren. 是一条路线的财产’指定需要懒惰的模块的路径’第一次导航。更新 src / app / app-ruting.module.ts with below code.


动态导入语法与Loadchildren用于懒惰的装载或可以说 负载需求。

现在在功能模块中配置路由

当我们创建了上面的管理模块的两个组件时,我们必须使用我们的功能配置该路由’S模块。所以,现在我们必须创造 行政 / admin-ruting.module.ts 以下代码的文件:

我们在上面的代码中做了什么?

我们为我们的管理模块创建路由模块,其中添加登录和仪表板组件的路由。我们需要使用馈送路由到角路由器 forchild() 方法而不是 forotoot() module.

现在注册你的 行政routingmodule. 在你的 Adminmodule.

添加管理员路由模块 src / app / admin / admin.module.ts 如下代码所示:


那’s it!!!

今天您学习使用Loadchildren属性,动态导入和懒惰加载的模块。如果你认为它’S很好地了解此功能模块。然后请与你的朋友分享。

 

0
概括
使用懒惰的加载模块加快角度应用程序
文章名
使用懒惰的加载模块加快角度应用程序
描述
延迟加载模块是角度10的特征,其减少了通过用户发送的应用束's browser.
作者
出版商名称
DAS JS.
出版商标志