Angular で遅延読み込みを実装する

1. Angular での遅延読み込みの使用
2. Angular で遅延読み込みを実装する

このチュートリアルでは、Angular での遅延読み込みの使用法とその実装方法について説明します。

遅延読み込みは、ウェブページのリソースを遅延して読み込むプロセスです。この手法は通常、トップレベルではなく、大量のデータや画像を含む Web ページで使用されます。

Angular 遅延読み込みは、特定のページに必要なリソースのみを読み込むのに役立ちます。これにより、初期ダウンロードサイズが削減され、ネットワークリクエストが削減されるため、アプリケーションのパフォーマンスが向上します。

これは、Angular の組み込みの Lazy Load モジュール、または構成とビルドを Webpack に依存する Angular Universal LazyLoadModule などの外部モジュールを使用して実現できます。

Angular での遅延読み込みの使用

遅延読み込みの最も一般的な使用例は、API からデータを読み込む場合ですが、すべてのデータを取得する必要はありません。アプリにルーティングなしの単一ビューがある場合は機能しません。

遅延読み込みは、アプリケーションが最初にデプロイされたときに、重要なモジュールだけが読み込まれて使用されることを保証します。これにより、ロード時間が短縮され、エンドユーザーのアプリケーションの応答性が向上するため、パフォーマンスの面でアプリケーションにメリットがあります。

すべてのモジュールをロードするには時間がかかるため、ユーザーが最初にページにアクセスしたときに少数のモジュールのみをロードし、必要に応じてさらにロードします。

Angular の遅延読み込みのユースケースのいくつかについて説明しましょう。

• 重要ではないスクリプトとスタイルシートを必要になるまで延期します。
• e コマース Web サイトのベンダー向け画面と顧客向け画面は、異なるモジュールに分割されている場合があります。独自に支払いモジュールを構築することもできます。
• 必要に応じてのみスクリプトとスタイルシートをロードします。

Angular で遅延読み込みを実装する

Angular での遅延読み込みの実装は非常に簡単なプロセスです。正しいモジュールを追加し、ルートを設定する必要があります。

最初のステップは、遅延読み込みに必要なモジュールを追加することです。これを行うには、@ angle /router から LazyModule をインポートし、アプリケーションモジュールの NgModule デコレータの imports 配列に追加します。

次に、ルートを構成して、オンデマンドでロードするモジュールとオンデマンドで遅延ロードするモジュールを指定する必要があります。loadChildren: 'lazy-loaded-child-routes'を属性として使用して新しいルートを追加するか、既存のルートを変更します。

例：

TypeScript コード（app.component.ts）：

import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent { }
@Component({
    selector: 'app-home',
    template: '<h3>Home Active!!!</h3>',
})
export class AppadComponent  {}
const routes: Routes = [
    { path: 'Home', component: AppadComponent },
    { path: 'About', loadChildren: './lazy-loading.module#SecondModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }

TypeScript コード（lazy-loading.modules.ts）：

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'app-about',
    template: '<h3>About Active!!!</h3>',
})
export class MyComponent  {}
const routes: Routes = [
    { path: '', component: MyComponent }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }
@NgModule({
    imports:      [ RootRoutingModule ],
    declarations: [ MyComponent ]
})
export class SecondModule { }

HTML コード（app.component.html）：

<h2> Example of Angular Lazy Loading</h2>
    <a routerLink='Home'>Home</a>
    <br>
    <a routerLink='About'>About</a>
    <router-outlet></router-outlet>

ここをクリックして、上記のコードの動作を確認してください。

可能であれば、ユーザーが頻繁にアクセスする遅延読み込みパスは避けてください。チャンクのサイズをできるだけ小さくします。

さらに、遅延ロードされたルートが取得されたら、ルーターの状態を使用してローダーまたはアニメーションを表示し、ユーザーがアプリケーションが遅れていると思わないようにします。