こんにちは、開発部の鈴木です。
今回は、Angularアプリケーションの開発における、モジュール設計で普段意識していることと、モジュールの遅延ロードについて紹介します。

モジュールとは

Angularには、アプリケーションの機能や関心事をまとめるためのモジュールという仕組みが備わっています。
Angularアプリケーションを新規作成した際に生成されるAppModuleも、モジュールのひとつになります。
AppModuleはその中でもルートモジュールと呼ばれ、アプリケーションを起動するための役割を持ちます。

Angularアプリケーションの開発はAppModuleのみで行うこともできますが、新しいモジュールを作成し活用することでコードの整理や、遅延ロードによるパフォーマンスの改善を行うことができます。

モジュール設計

それでは、どのようにモジュールを作成しているか紹介します。

ここで紹介するコードのサンプルはこちらを参照してください。

まず、アプリケーションに新しい機能を追加するタイミングでその機能名のモジュールを作成します。
モジュールとしてまとめる機能の単位はあまり細かくせず、その機能へアクセスするためのURLの構成と類似するように意識しています。

例として、TODOリストの機能を追加する場合は、TodoModuleというモジュールを作成します。
また、このタイミングでルーティングのパスが/todoになるだろうということも同時に意識しています。

そしてTODOリストには、一覧の表示やTODOの作成、編集、削除などのユースケースが想定されると思います。
TodoModuleにはそれらのコードをまとめ、それと同時にTODOリストの機能や関心事が他のモジュールに含まれないようにします。
そうすることによって、TODOリストの機能のコードがどこにあるかが明確になり、機能の修正や削除が容易になります。

遅延ロード

先程作成したTodoModuleをルーティングの設定に追加します。
通常、ルーティングの設定の記述は以下のようになると思います。

const routes: Routes = [
  {
    path: 'todo',
    loadChildren: () => TodoModule,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

TodoModuleのように機能をモジュールに分けて実装した場合、遅延ロードされるように設定することができます。
遅延ロードを適用したルーティングの設定の記述は以下のようになります。

const routes: Routes = [
  {
    path: 'todo',
    loadChildren: () => import('./todo/todo.module').then((m) => m.TodoModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

遅延ロードされるモジュールのコードは、初期バンドルに含まれず、/todoへアクセスした際に読み込まれるようになります。
その結果、初期バンドルサイズが小さくなることで初回ロード時間が短縮され、パフォーマンスの改善に繋がります。