ルートレベルのコード分割を使用してアプリのパフォーマンスを改善します。
この投稿では、Angular アプリケーションでルートレベルのコード分割をセットアップする方法について説明します。これにより、JavaScript のバンドルサイズを削減し、操作可能になるまでの時間を大幅に改善できます。
コードサンプルは、この記事の GitHub にあります。eager ルーティングの例は、eager ブランチで入手できます。ルートレベルのコード分割の例は、遅延ブランチにあります。
コード分割が重要な理由
ウェブ アプリケーションの複雑さが増すにつれ、ユーザーに提供される JavaScript の量が大幅に増加しています。サイズの大きい JavaScript ファイルは、インタラクティブ性を著しく低下させる可能性があるため、特にモバイルでは、コストのかかるリソースになる可能性があります。
アプリケーションの機能を犠牲にすることなく JavaScript バンドルを圧縮する最も効率的な方法は、積極的なコード分割を導入することです。
コード分割を使用すると、アプリケーションの JavaScript を、異なるルートや機能に関連付けられた複数のチャンクに分割できます。この方法では、ユーザーが必要とする JavaScript をアプリケーションの最初の読み込み時にのみ送信するため、読み込み時間を短く抑えられます。
コード分割の手法
コード分割は、コンポーネント レベルとルートレベルの 2 つのレベルで行うことができます。
- コンポーネント レベルのコード分割では、コンポーネントを独自の JavaScript チャンクに移動し、必要に応じて遅延読み込みします。
- ルートレベルのコード分割では、各ルートの機能を個別のチャンクにカプセル化します。ユーザーは、アプリケーションを操作すると、個々のルートに関連付けられたチャンクを取得し、必要に応じて関連する機能を取得します。
この投稿では、Angular でルートレベル分割を設定する方法について説明します。
サンプル アプリケーション
Angular でルートレベルのコード分割を使用する方法を詳しく見ていく前に、サンプルアプリを見てみましょう。
アプリのモジュールの実装を確認します。AppModule
内では 2 つのルートが定義されています。HomeComponent
に関連付けられたデフォルト ルートと、NyanComponent
に関連付けられた nyan
ルートです。
@NgModule({
...
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: '',
component: HomeComponent,
pathMatch: 'full'
},
{
path: 'nyan',
component: NyanComponent
}
])
],
...
})
export class AppModule {}
ルートレベルのコード分割
コード分割を設定するには、nyan
eager ルートをリファクタリングする必要があります。
Angular CLI のバージョン 8.1.0 では、次のコマンドですべての操作を行うことができます。
ng g module nyan --module app --route nyan
これにより、以下が生成されます。
- NyanModule
という新しいルーティング モジュール
- NyanModule
を動的に読み込む nyan
という AppModule
のルート
- NyanModule
のデフォルト ルート
- ユーザーがデフォルト ルートに到達したときにレンダリングされる NyanComponent
というコンポーネント
Angular によるコード分割の実装について理解を深めるために、これらのステップを手動で進めていきましょう。
nyan
ルートに移動すると、ルーターはルーターのコンセントに NyanComponent
を表示します。
Angular でルートレベルのコード分割を使用するには、ルート宣言の loadChildren
プロパティを設定し、動的インポートと組み合わせます。
{
path: 'nyan',
loadChildren: () => import('./nyan/nyan.module').then(m => m.NyanModule)
}
積極的ルートとの主な違いは、次の 2 つです。
component
ではなくloadChildren
を設定している。ルートレベルのコード分割を使用する場合は、コンポーネントではなく、動的に読み込まれるモジュールを指す必要があります。loadChildren
で Promise が解決されると、NyanComponent
を指す代わりにNyanModule
を返します。
上記のスニペットでは、ユーザーが nyan
に移動したときに、Angular が nyan
ディレクトリから nyan.module
を動的に読み込み、モジュールで宣言されたデフォルト ルートに関連付けられたコンポーネントをレンダリングするように指定しています。
次の宣言を使用して、デフォルト ルートをコンポーネントに関連付けることができます。
import { NgModule } from '@angular/core';
import { NyanComponent } from './nyan.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [NyanComponent],
imports: [
RouterModule.forChild([{
path: '',
pathMatch: 'full',
component: NyanComponent
}])
]
})
export class NyanModule {}
このコードは、ユーザーが https://example.com/nyan
に移動すると NyanComponent
をレンダリングします。
Angular ルーターがローカル環境で nyan.module
を遅延的にダウンロードすることを確認するには:
- Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevTools を開きます。
[Network] タブをクリックします。
サンプルアプリで [NYAN] をクリックします。
nyan-nyan-module.js
ファイルが [ネットワーク] タブに表示されます。
この例は GitHub にあります。
スピナーを表示する
現時点では、ユーザーが [NYAN] ボタンをクリックしても、JavaScript がバックグラウンドで読み込まれていることがアプリケーションに示されていません。スクリプトの読み込み中にユーザーにフィードバックを提供するには、スピナーを追加することをおすすめします。
そのためには、まず app.component.html
の router-outlet
要素内にインジケーターのマークアップを追加します。
<router-outlet>
<span class="loader" *ngIf="loading"></span>
</router-outlet>
次に、ルーティング イベントを処理する AppComponent
クラスを追加します。このクラスは、RouteConfigLoadStart
イベントを認識すると loading
フラグを true
に設定し、RouteConfigLoadEnd
イベントを認識するとフラグを false
に設定します。
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
loading: boolean;
constructor(router: Router) {
this.loading = false;
router.events.subscribe(
(event: RouterEvent): void => {
if (event instanceof NavigationStart) {
this.loading = true;
} else if (event instanceof NavigationEnd) {
this.loading = false;
}
}
);
}
}
以下の例では、スピナーの動作を確認できるように、人為的な 500 ミリ秒のレイテンシを導入しています。
まとめ
ルートレベルのコード分割を適用すると、Angular アプリケーションのバンドルサイズを縮小できます。
- Angular CLI 遅延読み込みモジュール ジェネレータを使用して、動的に読み込まれるルートを自動的にスキャフォールディングします。
- ユーザーが遅延ルートに移動したときに、進行中のアクションがあることを示す読み込みインジケーターを追加します。