序章

遅延読み込みは、読み込まれるモジュールをユーザーが現在必要としているモジュールに制限するためのアプローチです。 これにより、アプリケーションのパフォーマンスが向上し、初期バンドルサイズが減少する可能性があります。

デフォルトでは、Angularは積極的な読み込みを使用してモジュールを読み込みます。 これは、アプリケーションを実行する前に、すべてのモジュールをロードする必要があることを意味します。 これは多くのユースケースには十分かもしれませんが、このロード時間がパフォーマンスに影響を及ぼし始める状況があるかもしれません。

注：以下では、Angular8以降のアプリでの遅延読み込みモジュールについて説明します。

この記事では、Angularアプリケーションで遅延読み込みルートを使用します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

このチュートリアルは、ノードv16.4.0、npm v7.19.0、@angular/core v12.1.0、および@angular/routerv12.1.0で検証されました。

ステップ1-プロジェクトの設定

遅延ロードされたルートは、ルートアプリモジュールの外部にある必要があります。 機能モジュールに遅延ロードされた機能が必要になります。

まず、 Angular CLI を使用して、AngularRouterで新しいプロジェクトを作成しましょう。

  1. ng new angular-lazy-loading-example --routing --style=css --skip-tests

次に、新しいプロジェクトディレクトリに移動します。

cd angular-lazy-loading-example

新しい機能モジュールを作成しましょう。

  1. ng generate module shop --route shop --module app.module

次に、shop機能モジュール内に3つのコンポーネントを作成しましょう。

最初はcartコンポーネントになります。

  1. ng generate component shop/cart

2番目はcheckoutコンポーネントになります。

ng generate component shop/checkout

3番目はconfirmコンポーネントになります。

ng generate component shop/confirm

3つのコンポーネントはすべて、shopディレクトリに配置されます。

注：アプリモジュールに遅延読み込みする必要のある機能モジュールをインポートしないでください。インポートすると、積極的に読み込まれます。

この時点で、shopモジュールと3つのコンポーネントを備えた新しいAngularプロジェクトができているはずです。

ステップ2–loadChildrenを使用する

メインのルーティング構成では、次のようなことを行う必要があります。

src / app / app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

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

Angular 8 の新機能である、loadChildrenは、 dynamic import 構文を使用して、遅延ロードされたモジュールを必要な場合にのみインポートする関数を想定しています。 動的インポートはpromiseベースであり、モジュールのクラスを呼び出すことができるモジュールへのアクセスを提供します。

ステップ3–機能モジュールでルート構成を設定する

あとは、機能モジュールに固有のルートを構成するだけです。

次に例を示します。

src / app / shop / shop-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

const routes: Routes = [
  { path: '', component: CartComponent },
  { path: 'checkout', component: CheckoutComponent },
  { path: 'confirm', component: ConfirmComponent },
];

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

そして最後に、機能モジュール自体に、forRootの代わりにRouterModuleのforChildメソッドを使用してルートを含めます。

shop / shop.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ShopRoutingModule } from './shop-routing.module';
import { ShopComponent } from './shop.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

@NgModule({
  declarations: [
    ShopComponent,
    CartComponent,
    CheckoutComponent,
    ConfirmComponent,
  ],
  imports: [
    CommonModule,
    ShopRoutingModule
  ]
})
export class ShopModule { }

これで、routerLinkディレクティブを使用して、/shop、/shop/checkout、または/shop/confirmに移動でき、これらのパスの1つが初めてロードされるときにモジュールがロードされます。に移動しました。

ターミナルで、サーバーを起動します。

  1. ng serve

これにより、main.jsファイルとsrc_app_shop_shop_module_ts.jsファイルが生成されます。

Output
Initial Chunk Files            | Names         |      Size
vendor.js                      | vendor        |   2.38 MB
polyfills.js                   | polyfills     | 128.58 kB
main.js                        | main          |  57.18 kB
runtime.js                     | runtime       |  12.55 kB
styles.css                     | styles        | 119 bytes

                               | Initial Total |   2.58 MB

Lazy Chunk Files               | Names         |      Size
src_app_shop_shop_module_ts.js | -             |  10.62 kB

次に、ブラウザを使用してlocalhost:4200にアクセスします。

ブラウザのDevToolsを開き、[ネットワーク]タブを確認して、遅延読み込みが機能することを確認します。 アプリケーションが最初にアプリケーションルートでロードされるとき、レイジーチャンクファイルを観察するべきではありません。 /shopのようなルートに移動するときは、src_app_shop_shop_module_ts.jsを観察する必要があります。

注：すぐに機能しない場合は、サーバーを再起動してみてください。

アプリケーションが遅延読み込みをサポートするようになりました。

結論

この記事では、Angularアプリケーションで遅延読み込みルートを使用しました。

依存関係のあるコンポーネントのテスト、サービスのテスト、およびモック、スタブ、およびスパイの使用で学習を続けます。

遅延読み込みの詳細については、公式ドキュメントを参照することもできます。