50. ルートの遅延読み込み — 使うまで読み込まない

loadComponent を使うと、そのルートのコンポーネントを「実際にそのURLへ移動したとき」に初めて読み込めます。component: Admin の代わりに loadComponent: () => import('./admin/admin').then(m => m.Admin) と書くだけで、Admin のコードは初回表示のバンドルから切り離されます。

アプリのコードは通常1つのJavaScriptファイル(バンドル)にまとめられ、最初のページ表示前にすべてダウンロードされます。遅延読み込みを使うとビルド時にファイルが分割され、初期バンドルが小さくなるため、最初の画面が速く表示されます。管理画面や設定画面のような「たまにしか開かないページ」に使うのが定番です。

つまずきやすいのは、import() の中に書くのがパスの文字列である点です。通常の import 文と違い、関数の形で書くことで「あとで読み込む」という意味になります。また、loadComponent と component を同じルートに両方書くことはできません。どちらか一方を選びます。

サンプルコード(フレームワーク環境が必要なため表示のみ)

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

export const routes: Routes = [
  // トップページはすぐ使うので通常どおり読み込む
  { path: '', component: Home },

  // 管理画面は /admin に行くまでコードを読み込まない
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin').then((m) => m.Admin),
  },
];

// ビルドすると admin のコードは別ファイルに分割され、
// 初回表示のダウンロード量が減る

サンプルコードで身につける(5本) →

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

公式ドキュメントで詳しく ↗