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

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Angular6.0 ベースのコンポーネント遅延読み込み機能の例
  • Angular2モジュールの遅延読み込み方法についての簡単な説明
  • Angular は画像の遅延読み込みを実装するサンプルコード
  • Angularの遅延読み込みメカニズムがリフレッシュ後にロールバックできない問題の簡単な解決策
  • Angularの遅延読み込みの落とし穴について簡単に説明します
  • Angularの遅延読み込みは、このモジュールで宣言されたコンポーネントを動的に作成して表示します。

<<:  MySQL クエリのパケットが大きすぎる問題と解決策

>>:  Linux でのプロセスデーモン スーパーバイザーのインストール、構成、および使用

推薦する

インデックススキャンを使用したMySQLソート

目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...

nginxリバースプロキシwebSocket設定の詳細な説明

最近、プロジェクトで作業しているときに webSocket プロトコルを使用し、WeChat アプレ...

Zabbix パスワードをリセットする方法 (ワンステップ)

問題の説明長い間アカウントパスワードを入力して Zabbix にログインしていないため、管理者パスワ...

Vue2.0/3.0双方向データバインディングの実装原理の詳細説明

Vue2.0/3.0双方向データバインディングの実装原理双方向データバインディングとは、データの変更...

テキストスクロール後の自動停止効果の例

効果は非常にシンプルで、次のコードを自分のページにコピーして実行するだけです。コードをコピーコードは...

Linux での MySQL のインストールに関する詳細なチュートリアル

1. MySQLサービスをシャットダウンする# service mysqld stop 2. rpm...

MySQLのexplain型の詳細な説明

導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...

変換を使用して純粋な CSS ポップアップ メニューを実装するためのサンプル コード

序文トップメニューを作成する場合、ポップアップのセカンダリメニューを作成する必要があります。 以前の...

このポイントのJavaScriptの基本

目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...

docker-compose が遅すぎる場合の解決策の詳細な説明

解決策はただ一つ、ソースを変更することです。 github からのソースは基本的にタイムアウトするの...

フロントエンドに必要なNginx設定の詳細な説明

Nginx (エンジン x) は、軽量で高性能な HTTP およびリバース プロキシ サーバーであり...

Vue.jsは背景テーブルコンポーネントのカプセル化を管理します

目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...

nginx 設定場所方法の概要

位置一致順序1. 「=」プレフィックス命令マッチング、マッチングが成功したら他のマッチングを停止2....

DockerでRedisを使用するための詳細な手順

1. はじめにこの記事では、Docker を使用して Redis を探索する方法を説明します。 Do...

無効と読み取り専用で入力を読み取り専用に設定する

読み取り専用入力を実現するには、無効と読み取り専用の 2 つの方法があります。当然、どちらの結果も読...