介绍

延迟加载是一种将加载的模块限制为用户当前需要的模块的方法。这可以提高应用程序的性能并减少初始包的大小。

默认情况下，Angular 使用预先加载来加载模块。这意味着必须先加载所有模块，然后才能运行应用程序。虽然这对于许多用例来说可能已经足够了，但在某些情况下，此加载时间可能会开始影响性能。

注意：以下内容涵盖了 Angular 8+ 应用程序中的延迟加载模块。

在本文中，您将在 Angular 应用程序中使用延迟加载路由。

先决条件

要完成本教程，您需要：

• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
• 对设置 Angular 项目有一定的了解。

本教程已通过 Node v16.4.0、npmv7.19.0、@angular/corev12.1.0 和@angular/routerv12.1.0 验证。

步骤 1 – 设置项目

延迟加载的路由需要在根应用模块之外。您将希望在功能模块中包含延迟加载的功能。

首先，让我们使用Angular CLI创建一个带有 Angular Router 的新项目：

ng new angular-lazy-loading-example --routing --style=css --skip-tests

然后导航到新的项目目录：

cd angular-lazy-loading-example

让我们创建一个新的功能模块：

ng generate module shop --route shop --module app.module

现在让我们在我们的shop功能模块中创建 3 个组件：

第一个将是一个cart组件：

ng generate component shop/cart

第二个将是一个checkout组件：

ng generate component shop/checkout

第三个将是一个confirm组件：

ng generate component shop/confirm

所有三个组件都将位于该shop目录中。

注意：不要在您的应用模块中导入应该延迟加载的功能模块，否则它们将被预先加载。

此时，您应该拥有一个包含一个shop模块和 3 个组件的新 Angular 项目。

第 2 步 – 使用 loadChildren

在您的主路由配置中，您需要执行以下操作：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'shop', loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule) },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Angular 8 的新loadChildren功能，需要一个使用动态导入语法的函数，仅在需要时才导入延迟加载的模块。动态导入是基于 Promise 的，让您可以访问模块，可以在其中调用模块的类。

步骤 3 – 在功能模块中设置路由配置

现在剩下要做的就是配置特定于功能模块的路由。

下面是一个例子：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

const routes: Routes = [
  { path: '', component: CartComponent },
  { path: 'checkout', component: CheckoutComponent },
  { path: 'confirm', component: ConfirmComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ShopRoutingModule { }

最后，在功能模块本身中，您将使用RouterModule‘sforChild方法而不是包含您的路线forRoot：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ShopRoutingModule } from './shop-routing.module';
import { ShopComponent } from './shop.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

@NgModule({
  declarations: [
    ShopComponent,
    CartComponent,
    CheckoutComponent,
    ConfirmComponent,
  ],
  imports: [
    CommonModule,
    ShopRoutingModule
  ]
})
export class ShopModule { }

现在您可以使用routerLink指令导航到/shop, /shop/checkout, or/shop/confirm并且模块将在第一次导航到这些路径之一时加载。

在您的终端中，启动服务器：

ng serve

这将生成一个main.js文件和一个src_app_shop_shop_module_ts.js文件：

Output
Initial Chunk Files            | Names         |      Size
vendor.js                      | vendor        |   2.38 MB
polyfills.js                   | polyfills     | 128.58 kB
main.js                        | main          |  57.18 kB
runtime.js                     | runtime       |  12.55 kB
styles.css                     | styles        | 119 bytes

                               | Initial Total |   2.58 MB

Lazy Chunk Files               | Names         |      Size
src_app_shop_shop_module_ts.js | -             |  10.62 kB

接下来，使用浏览器访问localhost:4200.

通过打开浏览器的 DevTools 并查看 Network 选项卡来验证延迟加载是否有效。当应用程序最初在应用程序根加载时，您不应该观察惰性块文件。当您导航到类似的路线时/shop，您应该观察src_app_shop_shop_module_ts.js。

注意：如果它不能立即工作，请尝试重新启动服务器。

您的应用程序现在支持延迟加载。

结论

在本文中，您在 Angular 应用程序中使用了延迟加载路由。

继续学习测试具有依赖项的组件、测试服务以及使用模拟、存根和间谍。

你也可以参考官方文档了解更多关于延迟加载的信息。