如何使用延迟加载模块更快地渲染Angular应用程序？
延迟加载模块是Angular 10的一项功能，首次导航时将加载其中的功能。此功能减少了通过用户传输的应用程序捆绑包’s browser.
但是Angular 8已经提供了延迟加载吗？ ？
是的，Angular 8中已经给出了延迟加载的想法。但是现在对于浏览器来说更具体了’s API in 角度的 10.
通常，角度 ngModules 渴望加载。每当应用程序加载时，所有 ngModules 将立即加载。在项目的初始阶段，您不会感觉到这种传统行为的影响。但是随着时间的流逝，您的应用程序将变得很大并带有更多功能。
然后，您显然会感觉页面加载将花费我们对应用程序的期望。在这种情况下，延迟加载对您很方便。它有助于仅加载必需的 ngModules 而不是全部。
我也写一篇文章给 获取大数据 在Angular应用程序中。本文可帮助您通过三种优化方式优化角度应用程序。
好吧，那我该如何实现呢？ ？♂️
在开始编写代码之前，我想先介绍一个名为 动态导入。
根据 v8.dev
动态导入（）引入了一种类似于函数的新导入形式，与静态导入相比，它可以释放新功能。
由于import（）返回一个promise，因此’可以使用async / await代替基于当时的回调样式。
的 动态导入API 是基于承诺的标准浏览器API。它使我们能够访问模块，从哪里’可以调用s类。
好吧，现在让’移至实施部分：
首先，创建一个Angular项目（我不’认为我必须告诉我如何使用CLI创建Angular项目。如果你不这样做’不知道，然后抱歉，请用谷歌搜索。）
现在创建一个 特征 模组 功能。
对于这种情况，我正在创建一个 管理模块。
|
1 |
ng g m 管理员 |
之后，添加功能模块的子组件。
|
1 2 |
ng g c 管理员/登录 ng g c 管理员/仪表板 |
现在，通过使用loadChildren向组件添加翅膀。
loadChildren 是路线的属性’指定当模块需要延迟加载的模块的路径’s首先导航到。更新资料 src / app / app-routing.module.ts 与下面的代码。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
进口 { Ng模块 } 从 '@角度/核心'; 进口 {路线, 路由器模块 } 从 '@角度/路由器'; const 路线： 路线 = [ {路径: '管理员', loadChildren: () => 进口(`./管理员/管理员.模组`). 然后 (m => m.管理员模块)}, ]; @Ng模块 ({ 进口: [路由器模块.forRoot(路线)], 出口商品: [路由器模块] }) 出口 类 AppRoutingModule {} |
动态导入语法与loadChildren一起用于延迟加载，或者可以说 按需加载。
现在在功能模块中配置路线
当我们在上面创建了管理模块的两个组件时，我们必须使用我们的功能配置该路由’的模块。所以，现在我们必须创建 管理员 / 管理员-routing.module.ts 带有以下代码的文件：
|
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 如以下代码所示：
|
1 2 3 4 5 6 7 8 |
@Ng模块({ 进口: [ 通用模块, 管理员路由模块 ], 声明书: [LoginComponent, 仪表板组件] }) 出口 类 管理员模块 { } |
那’s it!!!
今天，您将学习如何使用loadChildren属性，动态导入和延迟加载模块。如果你认为’对此功能模块有了很好的了解。然后，请与您的朋友分享。
