AngularにおけるLazyLoadingの実現方法
前提条件
- 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といった手法を適用できて、ユーザの体験を向上させることが可能になります。