遅延読み込みモジュール

遅延読み込みを使うと、必要なときにだけモジュールを読み込むため、パフォーマンスが向上します。この重要なAngular機能について学びましょう。

遅延読み込みとは

遅延読み込みとは、アプリケーションの起動時にすべてのモジュールを読み込むのではなく、ユーザーが特定のルートに移動したときにモジュールを非同期で読み込む仕組みです。

遅延読み込みを使う理由

• 初回の読み込み時間を短縮できる
• パフォーマンスが向上する
• リソースの使用を最適化できる

遅延ロードされるモジュールの作成

Angular CLIを使用して、遅延ロードする機能モジュールを作成します。

ng generate module admin --route admin --module app.module

遅延ルートの設定

ルーティングモジュールで遅延ロードを設定します。

{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

遅延ロードのテスト

開発者ツールを使用して、ルートが有効になったときにだけモジュールがロードされることを確認します。新しいJSファイルが動的にロードされることを確認できます。

プリロード戦略

Angularでは、遅延ロードされたモジュールをプリロードして、ナビゲーション速度をさらに向上させることができます。一般的な戦略は次のとおりです。

• プリロードしない（デフォルト）
• すべてのモジュールをプリロードする

遅延ロードのベストプラクティス

管理ダッシュボードや設定ページなど、アプリケーションの起動時にすぐ必要とならないモジュールには遅延ロードを使用します。

まとめ

Angularアプリケーションのパフォーマンスを向上させるために、遅延ロードを実装する方法を習得できました。よくできました。