Angularでルート/機能をレイジーロードするにはどうしますか?

Question

Accepted Answer

**レイジーロード**は、すべてを初期ダウンロードにバンドルするのではなく、ユーザーがそこにナビゲートするまで機能のコードのダウンロードを延期します。これにより初期バンドルが縮小され、アプリの最初の読み込みが高速化されます。

## スタンドアロンコンポーネントのレイジーロード(モダン)

```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`を独自のチャンクに分割し、ユーザーが`/admin`にアクセスした場合のみダウンロードするよう指示します。

## ルートのグループのレイジーロード

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

`loadChildren`は機能領域全体(すべてのルート/コンポーネント)を1つのチャンクとしてレイジーロードします — 大規模なアプリを機能で分割する標準的な方法です。

## 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
```

ユーザーは実際にアクセスするコンテンツのみダウンロードします — 多くの機能領域を持つ大規模なエンタープライズアプリにとって重要です。ほとんどのユーザーはそれらのうちの多くを開くことはありません。

## プリロード戦略(両方の利点)

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

プリロードはアプリ読み込み後、背景でレイジーチャンクを取得するため、初期バンドルは小さく保たれ、*かつ*後の操作は瞬時に感じられます。カスタム戦略(たとえば、次の可能性が高いルートのみをプリロード)も作成できます。

## なぜ重要なのか

レイジーロードはアプリが成長するにつれてAngularの初期バンドルを小さく保つための主要な技術です — Angularが対象とする大規模で複数機能のエンタープライズアプリには必須です。

ルート/機能(`loadComponent`/`loadChildren`)で分割すると、最初の読み込みが高速化され、プリロード戦略と組み合わせると、高速スタートと素早いナビゲーション の両方が得られます。

これは、かなりの規模のAngularアプリケーション内での標準的で高い影響を持つパフォーマンスプラクティスです。