Angular懒加载路由实现方法详解

简介

延迟加载（Lazy Loading）是一种按需加载模块的策略，即仅在用户实际访问时加载所需模块。该策略能够显著提升 Angular 应用的性能，并有效减小初始打包体积——在大型项目中，优化效果尤为突出。

默认情况下，Angular 采用“急切加载”（Eager Loading）模式，即在应用启动前加载所有模块。对于小型项目这或许足够，但随着模块数量增加，加载时间会迅速成为性能瓶颈。事实上，许多开发者容易忽略这一关键优化点。

接下来，我们将逐步介绍如何在 Angular 应用中配置并实现懒加载路由（Lazy Loading Routes）。

先决条件

要完成本教程，你需要具备以下条件：

• 在本地环境中安装 Node.js（具体安装步骤可参考《如何安装 Node.js 并创建本地开发环境》）。
• 具备基本的 Angular 项目搭建知识。

本教程已在 Node v16.4.0、npm v7.19.0、@angular/core v12.1.0 和 @angular/router v12.1.0 环境下完成测试验证。

步骤 1 – 设置项目

懒加载的路由不能定义在根应用模块中，而应放置在独立的功能模块内，这是实现懒加载的基本设计原则。

首先，使用 Angular CLI 创建一个带路由的新项目：

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 功能模块中，我们需要创建以下三个组件：

第一个是购物车组件（Cart）：

ng generate component shop/cart

第二个是结算组件（Checkout）：

ng generate component shop/checkout

第三个是确认组件（Confirm）：

ng generate component shop/confirm

这三个组件都将位于 shop 目录下。至此，项目已准备好一个包含 3 个组件的 shop 功能模块。

步骤 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 接受一个函数，该函数利用动态导入（Dynamic Import）语法加载模块，仅在用户实际访问对应路由时才会发起请求。动态导入基于 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.forChild 方法，而非 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 或 /shop/confirm 等路径。请注意，模块只会在首次访问这些路径时按需加载。

在终端中启动开发服务器：

ng serve

你会看到生成的打包文件，包括一个 main.js 和一个独立的懒加载文件 src_app_shop_shop_module_ts.js：

初始块文件            | 名称         |      大小
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 字节
                      | 初始总计     |   2.58 MB
延迟块文件           | 名称         |      大小
src_app_shop_shop_module_ts.js | -             |  10.62 kB

在浏览器中访问 localhost:4200，打开 DevTools 的网络面板进行验证：初始加载时不会出现懒加载块；当你导航到 /shop 时，src_app_shop_shop_module_ts.js 就会出现在网络请求中。恭喜，你的应用现已支持懒加载功能。

结论

本文完整介绍了在 Angular 应用中配置懒加载路由的整个流程，涵盖项目搭建、模块拆分以及动态加载实现，每个步骤都清晰明了。

接下来，你可以进一步学习如何测试包含依赖的组件、测试服务，以及如何使用模拟（Mock）、存根（Stub）和间谍（Spy）等测试技术。

更详细的官方文档也是很好的学习资源，其中包含许多关于懒加载的进阶指南。