Angularでのプリロード

Angularでのモジュールのプリロードは、遅延読み込みと非常によく似ていますが、熱心に読み込まれるすべてのモジュールの準備ができた直後にモジュールが読み込まれる点が異なります。これにより、遅延ロードされたモジュールに移動するときに発生する可能性のあるレイテンシが排除されますが、初期モジュールが最初にロードされるため、アプリの初期ロードが高速になるという利点があります。

以下では、Angular2+アプリのモジュールのプリロードについて説明します。

PreloadAllModules

プリロードを実行するデフォルトの方法は、 PreloadAllModules のプリロード戦略を使用することです。これは、すべてのレイジーロード可能なモジュールがプリロードされることを意味します。遅延読み込みを設定すると、実装は非常に簡単になります。

アプリモジュールで、PreloadAllModulesを他のルーターインポートと一緒にインポートします。

app.module.ts

import { RouterModule, Routes, PreloadAllModules }
  from '@angular/router';

そして、NgModuleのインポートで、プリロード戦略を指定します。

app.module.ts

imports: [
  ...
  RouterModule.forRoot(routes,
    { preloadingStrategy: PreloadAllModules })
],

そして、あなたはそれを持っています！レイジーロード可能なすべての機能モジュールがプリロードされるようになりました。

カスタムプリロード戦略

すべてのレイジーロード可能なモジュールをプリロードしたくない場合は、独自のプリロード戦略を実装できます。これは、一部のルートがめったに使用されず、プリロードする必要がまったくない場合に役立ちます。

PreloadingStrategyを実装するCustomPreloadingクラスを定義してエクスポートします。

custom-preloading.ts

import { Observable } from 'rxjs/Observable';
import { PreloadingStrategy, Route } from '@angular/router';

クラスを実装するために、ルート情報を取り込む preload メソッドと、モジュールをプリロードする必要がある場合に呼び出す関数を定義します。メソッド自体はobservableを返す必要があるため、モジュールをプリロードしない場合にObservable.of(null)を返すのはなぜですか。

これで、アプリモジュールで、プリロード戦略クラスをインポートして提供し、RouterModule.forRootに通知します。

app.module.ts

// ...
import { routes } from './routes';
import { CustomPreloading } from './custom-preloading';

ルート

ルートはこれに似たもので設定でき、プリロードする必要のあるモジュールにpreload: trueを使用してデータオブジェクトを提供します。

ルート.ts

import { DashboardComponent } from './dashboard/dashboard.component';

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

遅延読み込みの場合と同様に、DevToolsの[ネットワーク]タブに移動して、チャンクが読み込まれ、事前読み込みが機能していることを確認できます。