简介
_Lazy loading_是一种将加载的模块限制为用户当前需要的模块的方法。这可以提高应用程序的性能并减少初始包的大小。
缺省情况下，ANGLE使用_EAGER LOADING_来加载模块。这意味着必须加载所有模块，然后才能运行应用程序。虽然这对于许多用例来说可能已经足够了，但在某些情况下，加载时间可能会开始影响性能。
<$>[备注] 注意： 以下介绍的是角度8+应用中的延迟加载模块。 <$>
在本文中，您将在一个角度应用程序中使用延迟加载路线。
前提条件
要完成本教程，您需要：
- 本地安装node.js，可按照如何安装node.js并创建本地开发Environment.
- 对设置角度project.》有所了解
本教程验证了Node v16.4.0、npmv7.19.0、@angular/corev12.1.0和@angular/routerv12.1.0。
第一步-设置项目
延迟加载的路由需要在根应用程序模块之外。您会希望将延迟加载的功能放在功能模块中。
首先，让我们使用ANGLE CLI]来创建一个带有ANGLE路由器的新项目：
1ng new angular-lazy-loading-example --routing --style=css --skip-tests
然后导航到新项目目录：
1cd angular-lazy-loading-example
让我们创建一个新的功能模块：
1ng generate module shop --route shop --module app.module
现在，让我们在shop功能模块中创建3个组件：
第一个是一个cart组件：
1ng generate component shop/cart
第二个是checkout组件：
1ng generate component shop/checkout
第三个是confirm组件：
1ng generate component shop/confirm
这三个组件都将位于shop目录中。
<$>[备注] 注意： 不要在您的APP模块中导入应该延迟加载的功能模块，否则会被自动加载。 <$>
此时，您应该有了一个新的角度项目，其中包含一个`shop‘模块和3个组件。
第二步-使用loadChildren
在您的主路由配置中，您需要执行以下操作：
1[label src/app/app-routing.module.ts]
2import { NgModule } from '@angular/core';
3import { RouterModule, Routes } from '@angular/router';
4
5const routes: Routes = [
6 { path: 'shop', loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule) },
7];
8
9@NgModule({
10 imports: [RouterModule.forRoot(routes)],
11 exports: [RouterModule]
12})
13export class AppRoutingModule { }
新的Angular 8，loadChildren期望一个使用dynamic import语法的函数，仅在需要时导入延迟加载的模块。动态导入是基于promise的，它使您可以访问模块，并可以在其中调用模块的类。
第三步-在功能模块中设置路由配置
现在，剩下的工作就是配置特定于功能模块的路由。
下面是一个例子：
1[label src/app/shop/shop-routing.module.ts]
2import { NgModule } from '@angular/core';
3import { RouterModule, Routes } from '@angular/router';
4
5import { CartComponent } from './cart/cart.component';
6import { CheckoutComponent } from './checkout/checkout.component';
7import { ConfirmComponent } from './confirm/confirm.component';
8
9const routes: Routes = [
10 { path: '', component: CartComponent },
11 { path: 'checkout', component: CheckoutComponent },
12 { path: 'confirm', component: ConfirmComponent },
13];
14
15@NgModule({
16 imports: [RouterModule.forChild(routes)],
17 exports: [RouterModule]
18})
19export class ShopRoutingModule { }
最后，在功能模块本身中，您将使用RouterModule的forChild方法而不是forRoot来包含路由：
1[label shop/shop.module.ts]
2import { NgModule } from '@angular/core';
3import { CommonModule } from '@angular/common';
4
5import { ShopRoutingModule } from './shop-routing.module';
6import { ShopComponent } from './shop.component';
7import { CartComponent } from './cart/cart.component';
8import { CheckoutComponent } from './checkout/checkout.component';
9import { ConfirmComponent } from './confirm/confirm.component';
10
11@NgModule({
12 declarations: [
13 ShopComponent,
14 CartComponent,
15 CheckoutComponent,
16 ConfirmComponent,
17 ],
18 imports: [
19 CommonModule,
20 ShopRoutingModule
21 ]
22})
23export class ShopModule { }
现在，您可以使用routerLink指令导航到/shop、/shop/checkout或/shop/confirm，并且模块将在第一次导航到其中一个路径时加载。
在您的终端中，启动服务器：
1ng serve
这将生成一个main.js文件和一个src_app_shop_shop_模块_ts.js文件：
1[secondary_label Output]
2Initial Chunk Files | Names | Size
3vendor.js | vendor | 2.38 MB
4polyfills.js | polyfills | 128.58 kB
5main.js | main | 57.18 kB
6runtime.js | runtime | 12.55 kB
7styles.css | styles | 119 bytes
8
9 | Initial Total | 2.58 MB
10
11Lazy Chunk Files | Names | Size
12src_app_shop_shop_module_ts.js | - | 10.62 kB
接下来，使用浏览器访问本地主机：4200。
打开浏览器的DevTools并查看Network选项卡，验证延迟加载是否正常工作。当应用程序最初在应用程序根目录加载时，您不应该观察到延迟块文件。当您导航到类似/shop的路径时，您应该会看到src_app_shop_shop_模块_ts.js。
<$>[注] 注意： 如果无法立即运行，请尝试重新启动服务器。 <$>
您的应用程序现在支持延迟加载。
总结
在本文中，您在一个角度应用程序中使用了延迟加载路线。
通过测试带有依赖项的组件、测试服务以及使用模拟、stubs，和间谍]继续学习。
您还可以参考[官方文档]以获取有关Lazy loading](https://angular.io/guide/lazy-loading-ngmodules).的更多信息