サンプルコードで身につける: ルートの遅延読み込み — 使うまで読み込まない

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1loadComponent の最小例

遅延読み込みの基本形です。component の代わりに loadComponent へ「import() してコンポーネントを取り出す関数」を渡します。/report に初めて移動した瞬間にコードが読み込まれ、それまでは1バイトもダウンロードされません。

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'report',
    // /report に行くまで report のコードを読み込まない
    loadComponent: () =>
      import('./report/report').then((m) => m.Report),
  },
];

2即時読み込みと遅延読み込みを併用する

全ページを遅延にする必要はありません。最初に必ず表示するトップは通常の component で読み込み、たまにしか開かないページだけ loadComponent にする、というメリハリのある構成です。初期バンドルには Home だけが入り、初回表示が軽くなります。

import { Routes } from '@angular/router';
import { Home } from './home';

export const routes: Routes = [
  // 最初に必ず表示するページは即時読み込み
  { path: '', component: Home },

  // たまにしか開かないページは遅延読み込み
  {
    path: 'settings',
    loadComponent: () =>
      import('./settings/settings').then((m) => m.Settings),
  },
  {
    path: 'help',
    loadComponent: () => import('./help/help').then((m) => m.Help),
  },
];

3loadChildren で子ルートごと遅延読み込みする

画面が複数ある機能は、子ルートの配列ごと別ファイルに分けて loadChildren で遅延読み込みできます。管理画面のような「まとまった機能一式」を丸ごと初期バンドルから切り離す、実務でよく使う形です。admin.routes.ts 側は普通の Routes 配列を default エクスポートするだけです。

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'admin',
    // 管理画面のルート定義ごと遅延読み込みする
    loadChildren: () => import('./admin/admin.routes'),
  },
];

// ./admin/admin.routes.ts 側:
// import { Routes } from '@angular/router';
// export default [
//   { path: 'orders', component: OrderList },
//   { path: 'settings', component: AdminSettings },
// ] satisfies Routes;

4遅延ルートにガードを組み合わせる

遅延読み込みは canActivate と併用できます。ガードの判定はコードの読み込みより先に走るため、入れないユーザーのために管理画面のコードをダウンロードする無駄がありません。「重くて、かつ限られた人しか使わないページ」でこの組み合わせが特に効きます。

import { Routes } from '@angular/router';
import { authGuard } from './auth.guard';

export const routes: Routes = [
  {
    path: 'admin',
    // ガードで弾かれた場合、コードの読み込み自体が行われない
    canActivate: [authGuard],
    loadComponent: () =>
      import('./admin/admin').then((m) => m.Admin),
  },
];

5ダッシュボードを持つアプリの分割設計

「すぐ使うログインとトップは即時、重いグラフ画面と管理機能は遅延」という現実的な分割方針の全体像です。どのページを遅延にするかは、初回に必要か・コード量が多いか、の2点で判断します。バンドルの分割はこの配列を眺めるだけで読み取れるようになります。

import { Routes } from '@angular/router';
import { Login } from './login';
import { Home } from './home';

export const routes: Routes = [
  // 初回に必要な画面: 即時読み込み
  { path: '', component: Home },
  { path: 'login', component: Login },

  // グラフライブラリを使う重い画面: 遅延読み込み
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard').then((m) => m.Dashboard),
  },

  // 管理者しか使わない機能一式: ルート定義ごと遅延読み込み
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.routes'),
  },
];