Angular がサードパーティのコンポーネントと遅延読み込みテクノロジーを使用してパフォーマンスを最適化する方法についての簡単な説明

関連する推奨事項: "angular チュートリアル "

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

開発者が Angular を深く理解して使用できるように、この記事ではお客様の間で最も典型的なビジネス シナリオを取り上げます。オンライン フォーム編集を例として、遅延読み込みテクノロジを使用して Angular に実装する方法を示します。 -ベースのフレームワーク Excel のオンライン インポートとエクスポート、およびオンライン データ レポート機能。

#環境の準備

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

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

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

• angular.json での SpreadJS CS の構成

• Angular アプリケーションでの SpreadJS の使用
  #Use Angular CLI to build and run the project

• 上記の環境構築が完了したら、テーブル エディター コンポーネントを Angular プロジェクトに統合して、Excel のオンライン インポートとエクスポートを実現できます。オンラインデータの入力レポートやその他の機能。

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

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

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

したがって、複数のルートを持つ大規模なアプリケーションの場合は、遅延ロードオンデマンドロード 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 のインポート配列リストは LazyWebExcelRoutingModule であり、LazyWebExcelModule が独自のルーティング モジュールにアクセスできるようにします。また、LazyWebExcelComponent は LazyWebExcelModule に属します。

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

5. 適切に動作していることを確認する

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

概要

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

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

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

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がAngular がサードパーティのコンポーネントと遅延読み込みテクノロジーを使用してパフォーマンスを最適化する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。