Angular 懒加载（Lazy Loading）详解

在 Angular 应用程序中，懒加载（Lazy Loading）是一种优化技术，它通过按需加载模块来减少初始加载时间，从而提高应用的性能和用户体验。本文将详细讲解什么是 Angular 的懒加载、为什么使用它、如何在项目中实现，以及懒加载的最佳实践。

1. What is Lazy Loading in Angular?

1. 什么是 Angular 中的懒加载？

English:
Lazy loading in Angular refers to the practice of loading JavaScript modules only when they are needed. Instead of loading the entire application at startup, Angular divides the application into smaller, lazy-loaded chunks and only loads them when a specific route is activated. This reduces the initial load time and improves performance, especially for large applications with multiple modules.

中文:
懒加载是指仅在需要时加载 JavaScript 模块，而不是在启动时加载整个应用程序。Angular 通过将应用程序划分为较小的、懒加载的模块，并在激活特定路由时才加载它们，从而减少初始加载时间，并提高性能。这对于具有多个模块的大型应用程序尤其有效。

2. Why Use Lazy Loading?

2. 为什么要使用懒加载？

English:
The primary reason to use lazy loading in Angular is to optimize the application’s performance by reducing the amount of data that is loaded initially. When the application is split into smaller, more manageable chunks, it can:

1. Reduce Initial Load Time: Only the necessary components and modules are loaded initially, leading to faster startup times.
2. Improve User Experience: Faster load times mean a better user experience, as users do not have to wait for the entire application to load.
3. Optimize Resource Usage: Only load the resources that are required at a given moment, reducing memory and bandwidth usage.
4. Enable Code Splitting: Break the application into multiple bundles, making it easier to maintain and debug.

中文:
在 Angular 中使用懒加载的主要目的是通过减少初始加载的数据量来优化应用程序的性能。当应用程序被拆分为更小且更易管理的模块时，它可以：

1. 减少初始加载时间：初始时只加载必要的组件和模块，从而加快启动时间。
2. 改善用户体验：更快的加载时间意味着更好的用户体验，因为用户无需等待整个应用程序加载完毕。
3. 优化资源使用：仅加载当前所需的资源，减少内存和带宽的使用。
4. 实现代码分离：将应用程序拆分为多个包，更容易维护和调试。

3. How to Implement Lazy Loading in Angular?

3. 如何在 Angular 中实现懒加载？

English:
Lazy loading in Angular is implemented using the loadChildren property in the Angular Router configuration. The loadChildren property allows you to specify a module to load lazily when a certain route is activated. Let’s walk through the steps to implement lazy loading in an Angular application:

1. Create a New Module
2. Configure the Route with loadChildren
3. Run and Test the Application

中文:
在 Angular 中，懒加载是通过 Angular 路由配置中的 loadChildren 属性实现的。loadChildren 属性允许你在激活特定路由时指定一个需要懒加载的模块。以下是如何在 Angular 应用程序中实现懒加载的步骤：

1. 创建新模块
2. 使用 loadChildren 配置路由
3. 运行和测试应用程序

Step 1: Create a New Module

步骤 1：创建新模块

Create a new module using the Angular CLI command:

使用 Angular CLI 命令创建一个新模块：

ng generate module feature --route feature --module app.module

Explanation:
This command creates a new feature module named FeatureModule and configures it to be lazy-loaded when the /feature route is activated. The --route and --module flags ensure that the module is set up correctly for lazy loading.

解释：
该命令创建了一个名为 FeatureModule 的新功能模块，并配置在激活 /feature 路由时进行懒加载。--route 和 --module 标志确保模块被正确设置为懒加载。

Step 2: Configure the Route with loadChildren

步骤 2：使用 loadChildren 配置路由

In the app-routing.module.ts file, configure the route to use loadChildren:

在 app-routing.module.ts 文件中，配置路由以使用 loadChildren：

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

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) // 使用懒加载配置
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }
];

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

Explanation:
The loadChildren property is used to specify a lazy-loaded module. It uses a dynamic import statement (import('./feature/feature.module')) that returns a promise. When the promise resolves, the module is loaded, and the application navigates to the /feature route.

解释：
loadChildren 属性用于指定懒加载模块。它使用动态导入语句 (import('./feature/feature.module'))，该语句返回一个 Promise。当 Promise 解析时，模块被加载，应用程序导航到 /feature 路由。

Step 3: Run and Test the Application

步骤 3：运行和测试应用程序

Run the application and navigate to the /feature route to see the lazy-loaded module in action:

运行应用程序，并导航到 /feature 路由以查看懒加载模块的实际效果：

ng serve

Open the browser’s developer tools and go to the Network tab. Notice that when navigating to /feature, a new chunk (e.g., feature-feature-module.js) is loaded dynamically.

打开浏览器的开发者工具并进入网络（Network）标签页。注意，当导航到 /feature 路由时，会动态加载一个新的包（例如，feature-feature-module.js）。

4. Best Practices for Using Lazy Loading

4. 使用懒加载的最佳实践

English:
To get the most out of lazy loading in Angular, follow these best practices:

1. Split Large Modules: Break down large feature modules into smaller submodules that can be lazy-loaded individually.
2. Avoid Eager Loading for Large Modules: Don’t load large modules eagerly in the main bundle; instead, defer them until needed.
3. Use Preloading for Critical Paths: Use the PreloadAllModules strategy to preload modules that are critical to the user experience.
4. Organize Routes by Feature: Group related routes into modules based on features for better management and maintainability.
5. Monitor Load Times: Use Chrome DevTools or Angular CLI’s --stats-json flag to analyze and monitor lazy loading performance.

中文:
为了在 Angular 中充分利用懒加载，请遵循以下最佳实践：

1. 拆分大型模块：将大型功能模块拆分为更小的子模块，这些子模块可以单独进行懒加载。
2. 避免为大型模块使用急加载：不要在主包中急加载大型模块，而应将它们延迟到需要时再加载。
3. 使用预加载策略处理关键路径：使用 PreloadAllModules 策略预加载对用户体验至关重要的模块。
4. 按功能组织路由：根据功能将相关路由分组到模块中，以便更好地管理和维护。
5. 监控加载时间：使用 Chrome DevTools 或 Angular CLI 的 --stats-json 标志来分析和监控懒加载性能。

5. Frequently Asked Questions about Lazy Loading

5. 关于懒加载的常见问题

Q1: What is the difference between eager loading and lazy loading?

English: Eager loading loads all modules and components during the initial load, while lazy loading loads them on demand when the route is activated.
中文: 急加载在初始加载时加载所有模块和组件，而懒加载则在激活路由时按需加载。

Q2: Can lazy loading and preloading be used together?

English: Yes, lazy loading and preloading can be combined. You can use the PreloadAllModules strategy to preload specific modules after the initial application load.
中文: 可以，懒加载和预加载可以结合使用。你可以使用 PreloadAllModules 策略在初始应用加载后预加载特定模块。

Q3: How to debug lazy-loaded modules?

English

: Use the browser’s Network tab to observe when lazy-loaded modules are fetched. You can also use the Angular CLI’s --stats-json option to analyze bundle sizes.
中文: 使用浏览器的网络（Network）标签页观察懒加载模块何时被获取。还可以使用 Angular CLI 的 --stats-json 选项来分析包的大小。

6. Summary

6. 总结

English:
Lazy loading in Angular is a powerful optimization technique that helps reduce initial load times and improve application performance. By using the loadChildren property, you can load feature modules only when needed. Following best practices like splitting large modules, using preloading strategies, and monitoring performance can help you get the most out of lazy loading in your Angular applications.

中文:
在 Angular 中，懒加载是一种强大的优化技术，有助于减少初始加载时间并提高应用性能。通过使用 loadChildren 属性，你可以在需要时才加载功能模块。遵循最佳实践，如拆分大型模块、使用预加载策略以及监控性能，可以帮助你在 Angular 应用程序中充分利用懒加载的优势。

Further Reading and References:

• Angular Lazy Loading Official Documentation
• Angular Routing & Navigation
• Angular CLI Preloading Strategies

进一步阅读与参考：

• Angular 懒加载官方文档
• Angular 路由与导航
• Angular CLI 预加载策略

Can Lazy Loading and Preloading Be Used Together?

懒加载和预加载可以结合使用吗？

English:
Yes, in Angular, you can combine lazy loading and preloading strategies to optimize the performance and responsiveness of your application. While lazy loading delays the loading of a module until its associated route is activated, preloading loads these lazily-loaded modules in the background after the initial application load. This hybrid approach provides the benefits of lazy loading while reducing the potential delay when navigating to a lazily-loaded module.

中文:
是的，在 Angular 中，你可以将懒加载和预加载策略结合使用，以优化应用程序的性能和响应速度。懒加载会在激活其相关路由时才加载模块，而预加载则会在初始应用加载后，在后台加载这些懒加载的模块。这种混合策略既提供了懒加载的优势，又减少了导航到懒加载模块时可能产生的延迟。

How to Use Lazy Loading with Preloading?

如何将懒加载与预加载结合使用？

English:
You can use the built-in PreloadAllModules strategy provided by Angular’s Router to preload all lazy-loaded modules in the background after the initial application load. This way, when a user navigates to a lazy-loaded module, it is already preloaded, and the navigation is faster and smoother.

中文:
你可以使用 Angular 路由提供的内置 PreloadAllModules 策略，在初始应用加载后，在后台预加载所有懒加载模块。这样，当用户导航到某个懒加载模块时，它已经被预加载，导航速度会更快、更流畅。

Step-by-Step Guide to Implement Preloading Strategy

实现预加载策略的步骤指南

English:

1. Enable Preloading in the Routing Module
2. Use PreloadAllModules Strategy
3. Verify Preloading Behavior

中文：

1. 在路由模块中启用预加载
2. 使用 PreloadAllModules 策略
3. 验证预加载行为

Step 1: Enable Preloading in the Routing Module

步骤 1：在路由模块中启用预加载

In your main routing module (e.g., app-routing.module.ts), configure the preloading strategy by adding PreloadAllModules to the RouterModule.forRoot() method.

在主路由模块（例如 app-routing.module.ts）中，通过将 PreloadAllModules 添加到 RouterModule.forRoot() 方法中来配置预加载策略。

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

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) // 懒加载配置
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }
];

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

Explanation:
By specifying { preloadingStrategy: PreloadAllModules }, Angular will preload all lazily-loaded modules in the background after the initial application load. This reduces the delay in module loading when a user navigates to a lazy-loaded route.

解释：
通过指定 { preloadingStrategy: PreloadAllModules }，Angular 会在初始应用加载后，在后台预加载所有懒加载模块。这样在用户导航到懒加载路由时，模块加载的延迟会减少。

Step 2: Use PreloadAllModules Strategy

步骤 2：使用 PreloadAllModules 策略

The PreloadAllModules strategy tells Angular to load all lazy-loaded modules as soon as the initial application has loaded. This is particularly useful for applications where you want to reduce perceived load times without affecting the initial load performance.

PreloadAllModules 策略告诉 Angular 在初始应用加载完成后尽快加载所有懒加载模块。这对于希望减少感知加载时间而不影响初始加载性能的应用程序特别有用。

Step 3: Verify Preloading Behavior

步骤 3：验证预加载行为

Open the browser’s developer tools and go to the Network tab. Notice that the lazy-loaded chunks (e.g., feature-feature-module.js) are fetched in the background immediately after the initial load. When you navigate to the /feature route, the module is already loaded, resulting in faster navigation.

打开浏览器的开发者工具，并进入网络（Network）标签页。注意，在初始加载后，懒加载的包（例如 feature-feature-module.js）会立即在后台获取。当你导航到 /feature 路由时，该模块已经被加载，从而使导航更快。

Preloading Strategies in Angular

Angular 中的预加载策略

English:
Besides PreloadAllModules, Angular provides several other preloading strategies that can be customized based on your application needs:

1. NoPreloading: Disables preloading for all lazy-loaded modules.
2. Selective Preloading Strategy: Implement a custom strategy to selectively preload only certain modules based on specific criteria.
3. Custom Preloading Strategy: Write your own preloading strategy using the PreloadingStrategy interface to define when and how modules should be preloaded.

中文:
除了 PreloadAllModules 之外，Angular 还提供了其他几种预加载策略，可以根据应用需求进行自定义：

1. NoPreloading：禁用所有懒加载模块的预加载。
2. 选择性预加载策略：实现自定义策略，根据特定条件选择性地预加载某些模块。
3. 自定义预加载策略：使用 PreloadingStrategy 接口编写自定义预加载策略，以定义模块应何时以及如何预加载。

Implementing a Custom Preloading Strategy

实现自定义预加载策略

If you need more control over which modules are preloaded, you can implement a custom strategy by extending the PreloadingStrategy interface. This allows you to define custom logic for deciding when and which modules to preload.

如果你需要更精细地控制哪些模块被预加载，可以通过扩展 PreloadingStrategy 接口来实现自定义策略。这使你能够定义自定义逻辑，以决定何时以及预加载哪些模块。

Example: Custom Preloading Strategy

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // 仅预加载具有 `data.preload` 标志的模块
    return route.data && route.data['preload'] ? load() : of(null);
  }
}

Then, apply the custom strategy in your routing module:

然后，在路由模块中应用自定义策略：

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

Explanation:
This custom strategy preloads only the modules that have data.preload set to true. This allows for fine-grained control over which modules are preloaded and when.

解释：
该自定义策略仅预加载 data.preload 设置为 true 的模块。这允许对模块的预加载进行细粒度的控制，并决定何时进行预加载。

Conclusion

结论

Combining lazy loading and preloading in Angular provides a powerful mechanism to optimize the performance and responsiveness of your applications. By using PreloadAllModules or implementing a custom preloading strategy, you can ensure that critical modules are preloaded in the background without impacting the initial load performance. Understanding when and how to use these strategies will help you build more efficient and responsive Angular applications.

将懒加载与预加载结合使用，可以为 Angular 应用程序提供强大的优化机制，从而提升应用的性能和响应速度。通过使用 PreloadAllModules 或实现自定义预加载策略，你可以确保关键模块在后台预加载，而不会影响初始加载性能。理解何时以及如何使用这些策略将帮助你构建更高效、更响应迅速的 Angular 应用程序。