Angular懒加载实现代码示例

在Angular应用开发中，首屏加载速度一直是开发者重点关注的问题。懒加载（Lazy Loading）正是解决这一痛点的利器——它允许我们把模块拆分成独立的代码块，等到用户真正访问对应功能时才去加载，从而大幅压缩初始打包体积。下面我们就从实操角度，拆解在Angular中实现懒加载的关键步骤。

整个流程其实并不复杂，核心分四步走。

1. 创建模块

首先要为需要懒加载的功能区域创建一个独立模块。例如，用户管理部分就抽出一个 UserModule。该模块内放置对应的组件、指令、管道等，并引入必要的公共模块。代码示例如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';
@NgModule({
  declarations: [UserComponent],
  imports: [
    CommonModule,
    // 其他需要的模块
  ]
})
export class UserModule { }

2. 配置路由

懒加载的关键在于路由配置。定义路由时，使用 loadChildren 属性指定要懒加载的模块路径。需要特别留意的是，Angular 9 及更高版本推荐使用动态导入语法（import()）替代老式的字符串路径写法。这样做的优势是代码分割更彻底，错误信息也更清晰。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
  // 其他路由配置...
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这里 loadChildren 返回一个 Promise，Angular 会在用户导航到 /user 时自动执行这个动态导入，加载 UserModule 及其所有依赖。

3. 在模板中使用路由

路由配置完成后，别忘了在根组件模板中添加一个 ，它作为一个占位符，告诉 Angular 将懒加载的组件渲染在何处。

这样一来，当用户点击“用户管理”或直接访问 /user 路径时，Angular 就会按需拉取对应的模块代码，然后渲染组件。整个加载过程对用户几乎是透明的，但首屏体积却实实在在变小了。

4. 优化加载性能

懒加载虽然有效，但如果所有懒加载模块都在用户跳转时才加载，可能会产生明显的等待延迟。此时可以考虑预加载策略——例如内置的 PreloadAllModules，它会在应用初始化完成后的空闲时间里，悄悄将未加载的懒加载模块提前下载下来。

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

当然，预加载并非万能。如果应用拥有大量懒加载模块，或者用户带宽有限，全量预加载反而可能带来不必要的流量消耗。在这种情况下，可以考虑自定义预加载策略——只预加载那些用户最可能访问的模块，或者根据网络状况动态调整加载时机。

以上就是 Angular 中实现懒加载的完整路线。从模块创建到路由配置，再到模板出口和性能优化，每一步都有其实际意义。掌握了这些步骤，你的 Angular 应用距离“又快又轻”就更近一步了。