序章
遅延読み込みは、読み込まれるモジュールをユーザーが現在必要としているモジュールに制限するためのアプローチです。 これにより、アプリケーションのパフォーマンスが向上し、初期バンドルサイズが減少する可能性があります。
デフォルトでは、Angularは積極的な読み込みを使用してモジュールを読み込みます。 これは、アプリケーションを実行する前に、すべてのモジュールをロードする必要があることを意味します。 これは多くのユースケースには十分かもしれませんが、このロード時間がパフォーマンスに影響を及ぼし始める状況があるかもしれません。
注:以下では、Angular8以降のアプリでの遅延読み込みモジュールについて説明します。
この記事では、Angularアプリケーションで遅延読み込みルートを使用します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Angularプロジェクトのセットアップにある程度精通している。
このチュートリアルは、ノードv16.4.0、npm
v7.19.0、@angular/core
v12.1.0、および@angular/router
v12.1.0で検証されました。
ステップ1-プロジェクトの設定
遅延ロードされたルートは、ルートアプリモジュールの外部にある必要があります。 機能モジュールに遅延ロードされた機能が必要になります。
まず、 Angular CLI を使用して、AngularRouterで新しいプロジェクトを作成しましょう。
ng new angular-lazy-loading-example --routing --style=css --skip-tests
次に、新しいプロジェクトディレクトリに移動します。
cd angular-lazy-loading-example
新しい機能モジュールを作成しましょう。
ng generate module shop --route shop --module app.module
次に、shop
機能モジュール内に3つのコンポーネントを作成しましょう。
最初はcart
コンポーネントになります。
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つが初めてロードされるときにモジュールがロードされます。に移動しました。
ターミナルで、サーバーを起動します。
ng serve
これにより、main.js
ファイルとsrc_app_shop_shop_module_ts.js
ファイルが生成されます。
OutputInitial 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アプリケーションで遅延読み込みルートを使用しました。
依存関係のあるコンポーネントのテスト、サービスのテスト、およびモック、スタブ、およびスパイの使用で学習を続けます。
遅延読み込みの詳細については、公式ドキュメントを参照することもできます。