概要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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL クエリのパケットが大きすぎる問題と解決策
>>: Linux でのプロセスデーモン スーパーバイザーのインストール、構成、および使用
目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...
最近、プロジェクトで作業しているときに webSocket プロトコルを使用し、WeChat アプレ...
問題の説明長い間アカウントパスワードを入力して Zabbix にログインしていないため、管理者パスワ...
Vue2.0/3.0双方向データバインディングの実装原理双方向データバインディングとは、データの変更...
効果は非常にシンプルで、次のコードを自分のページにコピーして実行するだけです。コードをコピーコードは...
1. MySQLサービスをシャットダウンする# service mysqld stop 2. rpm...
導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...
序文トップメニューを作成する場合、ポップアップのセカンダリメニューを作成する必要があります。 以前の...
目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...
解決策はただ一つ、ソースを変更することです。 github からのソースは基本的にタイムアウトするの...
Nginx (エンジン x) は、軽量で高性能な HTTP およびリバース プロキシ サーバーであり...
目次問題分析なぜカプセル化なのかパッケージの内容は何ですか?テーブルコンポーネントをカプセル化するデ...
位置一致順序1. 「=」プレフィックス命令マッチング、マッチングが成功したら他のマッチングを停止2....
1. はじめにこの記事では、Docker を使用して Redis を探索する方法を説明します。 Do...
読み取り専用入力を実現するには、無効と読み取り専用の 2 つの方法があります。当然、どちらの結果も読...