なになれ

IT系のことを記録していきます

AngularにおけるLazyLoadingの実現方法

Angular

前提条件

  • Angular8

LazyLoadingとは

通常のSingle Page ApplicationだとJavaScriptファイルなどのアセットを初回ロード時に全て読み込みます。
初回ロード時の読み込み時間を軽減するために、モジュール毎に分割して必要な時に読み込むのがLazyLoadingと呼ばれる手法になります。
JavaScriptのDynamic Importという機能を使って実現します。
初回ロードの時間が短くなるのでユーザ体験がよくなります。

実現方法

app-routing.module.ts

const routes: Routes = [
  ...
  { path: 'page', loadChildren: () => import('./page/page.module').then(mod => mod.PageModule) },
  ...
];

importを使って動的にモジュールを読み込んでいます。

PreLoadingとは

LazyLoadingの応用として、PreLoadingという方法が使えます。
これは初回表示の裏側で分割したモジュールを読み込むようにする方法です。
これにより、ページを切り替えた時に発生するLoading時の遅延を抑止することが可能になります。

実現方法

app-routing.module.ts

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

PreloadAllModulesによりLazyLoading対象のモジュールがPreLoadingの対象として扱われます。

まとめ

Angularでは簡単にLazyLoadingやPreLoadingといった手法を適用できて、ユーザの体験を向上させることが可能になります。

参考資料

angular.jp