你如何在 Angular 中对 routes/features 进行 lazy-load？

Question

Accepted Answer

**Lazy loading** 将 feature 的代码下载延迟到用户导航到它时，而不是在初始下载中捆绑所有内容。这会缩小初始 bundle 并加快应用的首次加载速度。

## 对 standalone component 进行 Lazy-load（现代方式）

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (in main bundle)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — separate chunk
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

动态 `import()` 告诉构建工具将 `AdminComponent` 拆分到自己的 chunk 中，仅在用户访问 `/admin` 时下载。

## 对一组 routes 进行 Lazy-load

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // load a whole feature's routes
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren` 将整个 feature 区域（其所有 routes/components）作为一个 chunk 进行 lazy-load — 这是按 feature 拆分大型应用的标准方式。

## 基于 NgModule 的形式（较旧的代码库）

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## 它为什么能改进性能

```text
Without lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (large, slow)
With lazy loading:    main.js = Home only; other features load on navigation
```

用户只下载他们实际访问的部分 — 对于具有许多 feature 区域（大多数给定用户从不打开）的大型 enterprise 应用至关重要。

## 预加载策略（兼顾两者）

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// load lazy chunks in the background AFTER initial load, so navigation is instant
```

预加载在应用加载后在后台获取 lazy chunks，因此初始 bundle 保持较小*且*后续导航感觉即时。您也可以编写自定义策略（例如仅预加载可能的下一个 routes）。

## 为什么这很重要

Lazy loading 是保持 Angular 初始 bundle 较小的主要技术，随着应用增长而成为必需 — 对于 Angular 所针对的大型多 feature enterprise 应用至关重要。

按 route/feature 拆分（`loadComponent`/`loadChildren`）意味着更快的首次加载，并与预加载策略配合使用可同时获得快速启动和敏捷导航。

这是任何相当规模的 Angular 应用中的标准、高影响力的性能实践。