Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー

概要

Angular アプリケーションのパフォーマンスの問題について不満を述べたことがある人は多いはずです。実際、Angular プロジェクトを構築する際には、パッケージ化、遅延読み込み、変更検出戦略とキャッシュ テクノロジ、サードパーティ コンポーネントの支援を使用することで、プロジェクトのパフォーマンスを効果的に向上できます。

開発者が Angular を深く理解して使用できるように、この記事ではオンライン テーブル編集を例に、遅延読み込みテクノロジを使用して Excel のオンライン インポートとエクスポート、およびオンライン データ レポートの機能を Angular ベースのフレームワークに実装する方法を説明します。

環境の準備

1. Angular CLIをグローバルにインストールします: npm install -g @angular/cli

2. Angular CLIを使用して新しいプロジェクトを作成します: ng new spread-sheets-angular-cli

3. SpreadJS Npm パッケージをダウンロードします: npm install @grapecity/spread-sheets; npm install @grapecity/spread-sheets-angular

4. angular.jsonでSpreadJS CSを設定する

5. Angular アプリケーションで SpreadJS を使用する

6. Angular CLIを使用してプロジェクトをビルドして実行する

上記の環境設定を完了すると、テーブル エディター コンポーネントを Angular プロジェクトに統合して、Excel のオンライン インポートとエクスポート、オンライン データ レポートなどの機能を実現できます。

最適化を始める前に、プロジェクトのパフォーマンスに影響を与える要因を分析しましょう。

プロジェクトのパフォーマンスに影響を与える要因

SpreadJS テーブル コンポーネントを統合した後、プロジェクトの数式データ処理速度は期待どおりになり、ページの実行がよりスムーズになりました。しかし、リリース後は、ユーザーがページを開いたときの読み込み時間が開発環境よりも長くなり、ユーザーエクスペリエンスが低下します。調査の結果、Angular のデフォルト状態では NgModule が積極的にロードされることがわかりました。つまり、アプリケーションがロードされると、できるだけ早くロードされるということです。すぐに使用するかどうかに関係なく、すべてのモジュールが一度にロードされます。

したがって、複数のルートを持つ大規模なアプリケーションの場合は、遅延読み込み (オンデマンドの NgModule 読み込み) を使用することをお勧めします。遅延読み込みにより、初期バンドルのサイズが縮小され、読み込み時間が短縮されます。

遅延読み込みとは何ですか?

Web アプリケーションでは、システムのボトルネックとなるのは多くの場合、システムの応答速度です。システムの応答が遅すぎると、ユーザーから苦情が出てしまい、システムの価値が大幅に低下してしまいます。遅延読み込みでは、初めて読み込むときに必要なモジュールが読み込まれますが、一時的に必要のない他のモジュールは読み込まれません。たとえば、ショッピングモールのシステムでは、ユーザーがホームページを開いたときに商品のみを表示する必要があり、この時点では支払いモジュールは必要ないため、支払いモジュールは遅延読み込み技術を使用できます。

プロジェクトの最適化

1. ビジネスモジュールを分割する

Angular モジュールを遅延ロードするには、AppRoutingModule ルート構成でコンポーネントではなく loadchildren を使用する必要があります。

遅延ロードされたモジュールのルーティング モジュールで、このコンポーネントを指すルートを追加します。このデモには遅延ロードされるモジュールが 2 つあります。

2. ナビゲーションUIを作成する

アドレスバーにURLを直接入力することもできますが、ナビゲーションUIがあった方が便利です。 3 つの a タグは、ホームページと遅延ロードが必要な 2 つのモジュールを表します。

3. インポートとルート構成

CLI は各機能モジュールをアプリケーション レベルのルート マップに自動的に追加し、最後にデフォルト ルートを追加して終了します。

4. 機能モジュールの内部

lazy-webexcel.module.ts ファイルを見て、lazy-webexcel-routing.module.ts ファイルと lazy-webexcel.component.ts ファイルをインポートしてみましょう。 @NgModule の imports 配列には LazyWebExcelRoutingModule がリストされ、LazyWebExcelModule が独自のルーティング モジュールにアクセスできるようになります。また、LazyWebExcelComponent は LazyWebExcelModule に属します。

AppRoutingModule のパスが設定されており、LazyWebExcelRoutingModule のこのルートは既に lazywebexcel コンテキスト内にあるため、パスを空に設定します。他のモジュールの構成も同様なので、詳細には触れません。

5. 正常に動作することを確認する

これらのモジュールが遅延ロードされているかどうかは、Chrome の開発者ツールの [ネットワーク ページ] タブで確認できます。 Designer Component LazyLoad をクリックすると、下の図のようなファイルが表示され、準備が完了し、機能モジュールが正常に遅延ロードされたことが示されます。

要約する

最適化後、最初の画面の読み込み時間を効果的に短縮できます。さらに、forRoot と forChild についても説明します。 CLI は、RouterModule.forRoot(routes) を AppRoutingModule のインポート配列に追加します。これにより、Angular は AppRoutingModule がルーティング モジュールであることを認識します。また、forRoot() は、これがルート ルーティング モジュールであることを示します。すべての着信ルートを設定し、ルーターのディレクティブにアクセスできるようにし、ルーターを登録します。

CLI は各機能モジュールに RouterModule.forChild(routes) も追加します。こうすることで、Angular は、このルート リストが追加ルートの提供のみを担当し、機能モジュールとして使用することを意図していることを認識します。 forChild() は複数のモジュールで使用できます。

上記は、SpreadJS を Angular フレームワークと組み合わせ、遅延読み込みテクノロジを利用してオンライン Excel プロジェクトを最適化する主なプロセスです。遅延読み込みに加えて、Angular は、ブラウザ キャッシュ戦略、RxJS、Tree Shaking、AoT コンパイルなど、多くのパフォーマンス最適化方法も提供します。これらのテクノロジをうまく使用すると、プロジェクトのパフォーマンスが向上し、ユーザーに優れたユーザー エクスペリエンスを提供できます。

上記は、Angular パフォーマンス最適化のためのサードパーティコンポーネントと遅延読み込みテクノロジーの詳細です。Angular パフォーマンス最適化の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。