Files
everything-claude-code/docs/ja-JP/skills/angular-developer/references/loading-strategies.md
Claude 174e31b3fc feat(ja-JP): add skill sub-reference translations (angular, remotion, etc.)
Translated 85 skill sub-reference files to achieve full parity with
the English source:

- skills/angular-developer/references/ — 35 files (all references)
- skills/remotion-video-creation/rules/ — 28 files (all rules)
- skills/tinystruct-patterns/references/ — 5 files
- skills/openclaw-persona-forge/references/ — 6 files
- skills/skill-comply/prompts/ — 3 files
- skills/lead-intelligence/agents/ — 4 files
- skills/brand-voice/references/ — 1 file
- skills/frontend-slides/ — 2 files
- hooks/memory-persistence/README.md — 1 file

English source parity: 0 missing files (excluding rules/zh/, internal
docs, and experimental examples absent from zh-CN)
2026-05-18 06:15:26 +09:00

2.1 KiB
Raw Blame History

ルート読み込み戦略

Angular は、初期読み込み時間とナビゲーションの応答性のバランスを取るために、ルートとコンポーネントの読み込みに関する2つの主要な戦略をサポートしています。

イーガーローディングEager Loading

コンポーネントは初期 JavaScript ペイロードにバンドルされ、即座に利用可能になります。

{ path: 'home', component: Home }
  • メリット:シームレスなトランジション。
  • デメリット:初期バンドルサイズが増加する。

レイジーローディングLazy Loading

コンポーネントやルートは、ユーザーが画面に遷移したときにのみ読み込まれます。これにより JavaScript の独立した「チャンク」が生成されます。

コンポーネントのレイジーローディング

loadComponent を使用して、コンポーネントをオンデマンドで取得します。

{
  path: 'admin',
  loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)`,
}

子ルートのレイジーローディング

loadChildren を使用して、ルートのセットを取得します。

{
  path: 'settings',
  loadChildren: () => import('./settings/settings.routes'),
}

インジェクションコンテキストとレイジーローディング

ローダー関数は現在のルートのインジェクションコンテキスト内で実行されます。これにより inject() を呼び出して、コンテキストを考慮した読み込み判断が可能になります。

{
  path: 'dashboard',
  loadComponent: () => {
    const flags = inject(FeatureFlags);
    return flags.isPremium
      ? import('./premium-dashboard')
      : import('./basic-dashboard');
  },
}

推奨事項

  • メインのランディングページにはイーガーローディングを使用する。
  • 初期バンドルを小さく保つために、その他のすべての機能領域にはレイジーローディングを使用する。