web-dev-qa-db-ja.com

Angular 6/7はデフォルトでEager / Lazyローディングを使用しますか？

タイトルが示すように、モジュールに遅延読み込みを手動で実装する必要がありますか、それともAngular 6/7デフォルトで実装しますか？

angularangular6angular7
4
Henry LowCZ

Angularは、特に指定されていない限り、デフォルトで積極的な読み込みを使用します。

遅延読み込みを実装するには、RouterModuleに次の項目を指定する必要があります。

  1. loadChildrenの代わりにcomponentを使用するルート構成オブジェクト。割り当てられる値は、Lazy Loaded Moduleへの相対パス、#、モジュール名の順になります。

  2. 遅延ロードされたモジュールは、ルーティングモジュールも実装する必要があり、そこではforChildではなくforRootを呼び出す必要があります。

モジュールの遅延読み込みを実装するために従うことができる非常に素晴らしい ガイド がAngularの公式ドキュメントで提供されています。

これが サンプルStackBlitz であり、遅延読み込みを実装するために従うことができます。

8
SiddAjmera

（ng buildを使用して）アプリケーションをビルドすると、アプリケーションはいくつかの* .jsスクリプトファイルにバンドルされ、それらのスクリプトファイルへの参照がindex.htmlファイルに追加されます。これらは、バックエンドサーバーにデプロイするファイルです。

ユーザーがサイト（www.yoursite.com）にアクセスすると、サイトをホストしているサーバーが特定され、index.htmlファイルとすべてのコードを含む参照されているすべてのスクリプトファイルがプルダウンされます。次に、そのコードがブラウザに読み込まれます。

遅延読み込みでは、index.htmlファイルがダウンしたときにアプリケーションのallがプルダウンされないように、アプリケーションを追加のバンドルにバンドルします。これにより、ユーザーのページの「最初の読み込み」が改善されます。次に、他のバンドルは「オンデマンド」（ユーザーが遅延ロードされたパス上のルートにアクセスするときを意味します）にプルダウンされるか、初期ロード後にバックグラウンドで非同期になります。

デフォルトでは、Angularは遅延読み込みを行いません。これはユーザーが定義するものです。

まず、アプリケーションをAngularモジュールに分割します。遅延読み込みはモジュールによって定義されます。各モジュールは、関連するコンポーネント、ディレクティブ、およびパイプのセットを定義します。

次に、特定の構文を使用して、次のようなルート構成の構文を使用してこれらのモジュールを遅延ロードします。

  {
    path: 'products',
    loadChildren: './products/product.module#ProductModule'
  },

次に、Angularは、遅延ロードされた各モジュールを、index.htmlファイルで参照されているスクリプトとは別の独自のスクリプトファイルにバンドルします。

詳細については、こちらをご覧ください： https://angular.io/guide/lazy-loading-ngmodules

3
DeborahK