跳到内容
达斯

使用延迟加载模块加速Angular应用程序

0

如何使用延迟加载模块更快地渲染Angular应用程序?

延迟加载模块是Angular 10的一项功能,首次导航时将加载其中的功能。此功能减少了通过用户传输的应用程序捆绑包’s browser.

但是Angular 8已经提供了延迟加载吗? ?

是的,Angular 8中已经给出了延迟加载的想法。但是现在对于浏览器来说更具体了’s API in 角度的 10.

通常,角度 ngModules 渴望加载。每当应用程序加载时,所有 ngModules 将立即加载。在项目的初始阶段,您不会感觉到这种传统行为的影响。但是随着时间的流逝,您的应用程序将变得很大并带有更多功能。

然后,您显然会感觉页面加载将花费我们对应用程序的期望。在这种情况下,延迟加载对您很方便。它有助于仅加载必需的 ngModules 而不是全部。

使用延迟加载模块加速Angular应用程序
如何使用延迟加载模块更快地渲染Angular应用程序

我也写一篇文章给 获取大数据 在Angular应用程序中。本文可帮助您通过三种优化方式优化角度应用程序。

好吧,那我该如何实现呢? ?‍♂️

在开始编写代码之前,我想先介绍一个名为 动态导入。

根据 v8.dev

动态导入()引入了一种类似于函数的新导入形式,与静态导入相比,它可以释放新功能。

由于import()返回一个promise,因此’可以使用async / await代替基于当时的回调样式。

动态导入API 是基于承诺的标准浏览器API。它使我们能够访问模块,从哪里’可以调用s类。

好吧,现在让’移至实施部分:

首先,创建一个Angular项目(我不’认为我必须告诉我如何使用CLI创建Angular项目。如果你不这样做’不知道,然后抱歉,请用谷歌搜索。)

现在创建一个 特征 模组 功能。

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

的JavaScript
1
ng g m 管理员


之后,添加功能模块的子组件。

的JavaScript
1
2
ng g c 管理员/登录
ng g c 管理员/仪表板

现在,通过使用loadChildren向组件添加翅膀。

loadChildren 是路线的属性’指定当模块需要延迟加载的模块的路径’s首先导航到。更新资料 src / app / app-routing.module.ts 与下面的代码。

app-routing.module.ts
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
进口 { Ng模块 } '@角度/核心';
进口 {路线, 路由器模块 } '@角度/路由器';
 
const 路线: 路线 = [
{路径: '管理员', loadChildren: () => 进口(`./管理员/管理员.模组`). 然后 (m => m.管理员模块)},
];
 
@Ng模块 ({
  进口: [路由器模块.forRoot(路线)],
  出口商品: [路由器模块]
})
出口 AppRoutingModule {}


动态导入语法与loadChildren一起用于延迟加载,或者可以说 按需加载。

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

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

的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
进口 { 路线 } '@角度/路由器';
进口 { 路由器模块 }   '@角度/路由器';
 
进口 { LoginComponent } './login/login.component';
进口 { 仪表板组件 } './dashboard/dashboard.component';
 
const 路线: 路线 = [
    { 路径: '', 零件: LoginComponent },
    { 路径: '仪表板', 零件: 仪表板Component }
];
 
@Ng模块({
  进口: [路由器模块.forChild(路线)],
  出口商品: [路由器模块]
})
出口 管理员路由模块 { }

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

我们为管理模块创建路由模块,在其中添加登录和仪表板组件的路由。我们需要使用来将路由提供给Angular路由器 forChild() 方法而不是 forRoot() 模块。

现在注册您的 管理员路由模块 在你的 管理员模块

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

的JavaScript
1
2
3
4
5
6
7
8
@Ng模块({
  进口: [
    通用模块,
    管理员路由模块
  ],
  声明书: [LoginComponent, 仪表板组件]
})
出口 管理员模块 { }


那’s it!!!

今天,您将学习如何使用loadChildren属性,动态导入和延迟加载模块。如果你认为’对此功能模块有了很好的了解。然后,请与您的朋友分享。

 

0
概要
使用延迟加载模块加速Angular应用程序
文章名
使用延迟加载模块加速Angular应用程序
描述
延迟加载模块是Angular 10的一项功能,它减少了通过用户浏览器传输的应用程序捆绑包。
作者
发布者名称
达斯
出版商徽标
达斯