【最新版】Angular でモジュールを遅延ロード：ngIvy、ライブラリ、プリロード/オンデマンドロード徹底比較

Angular でモジュールを手動で遅延ロードする方法

モジュールを手動で遅延ロードするには、以下の手順に従います。

ルーティング設定で loadChildren を使用する

AppRoutingModule の routes 設定で、loadChildren プロパティを使用して遅延ロードするモジュールを指定します。

{
  path: 'lazy',
  loadChildren: () => import('./lazy-routing.module').then(m => m.LazyRoutingModule)
}

この例では、lazy-routing.module.ts モジュールを遅延ロードします。

ルーティングモジュールを作成する

遅延ロードするモジュール用のルーティングモジュールを作成します。このモジュールには、モジュールのコンポーネントと子ルートを定義します。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';

const routes: Routes = [
  { path: '', component: LazyComponent }
];

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

この例では、LazyComponent コンポーネントと /lazy パスを持つルートを定義する LazyRoutingModule モジュールを作成します。

コンポーネントを作成する

遅延ロードするモジュール用のコンポーネントを作成します。

import { Component } from '@angular/core';

@Component({
  selector: 'app-lazy',
  template: 'Lazy component loaded!'
})
export class LazyComponent { }

この例では、LazyComponent コンポーネントを作成します。

アプリケーションモジュールから遅延ロードモジュールをインポートしない

AppModule から遅延ロードモジュールをインポートしないでください。そうしないと、モジュールが最初にロードされてしまいます。

上記のすべての手順を完了すると、アプリケーションは必要なモジュールだけを動的にロードするようになります。これにより、パフォーマンスが向上し、ユーザーの体験が向上します。

補足

• ネストされたルートを持つモジュールを遅延ロードするには、loadChildren プロパティで再帰的なモジュールロードを使用できます。
• プリロードを使用すると、特定のルートにアクセスする前にモジュールを事前にロードすることができます。
• オンデマンドロードを使用すると、モジュールが実際に必要になったときにのみロードすることができます。

これらの詳細については、Angular のドキュメントを参照してください: https://www.freecodecamp.org/news/lazy-loading-in-angular-intro-to-ngmodules/

Angular でモジュールを手動で遅延ロードするサンプルコード

lazy-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';

const routes: Routes = [
  { path: '', component: LazyComponent }
];

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

lazy.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-lazy',
  template: 'Lazy component loaded!'
})
export class LazyComponent { }

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

const routes: Routes = [
  { path: 'lazy', loadChildren: () => import('./lazy-routing.module').then(m => m.LazyRoutingModule) },
  { path: '**', component: HomeComponent } // デフォルトルート
];

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

このコードを実行すると、http://localhost:4200/lazy にアクセスすると、Lazy component loaded! というメッセージが表示されます。

この例は、モジュールを遅延ロードする方法を示す基本的な例です。実際のアプリケーションでは、より複雑なルーティングとモジュール構造を使用する可能性があります。

ngIvy を使用する

Angular 9 以降では、ngIvy という新しいコンパイラが導入されました。ngIvy は、モジュールの遅延ロードを自動的に処理する機能が強化されています。loadChildren プロパティを使用する代わりに、モジュールを直接ルーティングパスに指定できます。

{
  path: 'lazy',
  component: () => import('./lazy.component').then(m => m.LazyComponent)
}

第三者製のライブラリを使用する

ng-lazy-load や @angular-extensions/router-loading のような、モジュールの遅延ロードをより簡単に処理できる第三者製のライブラリがいくつかあります。

これらのライブラリは、追加の機能や、コードをより簡潔にするのに役立つユーティリティを提供することがあります。

プリロードとオンデマンドロードを使用する

特定のルートにアクセスする前にモジュールを事前にロードしたり、モジュールが実際に必要になったときにのみロードしたりすることもできます。

これを行うには、preloadingStrategy と loadChildren プロパティのオプションを使用します。

どの方法が最適かは、プロジェクトの要件によって異なります。シンプルなモジュールの遅延ロードの場合は、手動の方法で十分です。より複雑なアプリケーションや、より多くの機能が必要な場合は、ngIvy 、サードパーティ製のライブラリ、またはプリロードとオンデマンドロードを検討してください。

以下は、それぞれの方法の利点と欠点の簡単な比較表です。