概要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 でのプロセスデーモン スーパーバイザーのインストール、構成、および使用
1.公式サイトからダウンロードして解凍する参考: ダウンロード後、zip 圧縮ファイル (mysql...
1. redis で使用すると Netty の起動競合が発生するため、***Application ...
MySQLはインストール版と無料インストール版に分かれていますインストール版の拡張子はmsi、無料イ...
Apache Arrow は、BigQuery を含むさまざまなビッグデータ ツールで使用される一...
データベースに関して最もよく聞かれる質問の 1 つは、現在のビジネス ニーズを満たす MySQL の...
序文JavaScript ではセミコロンはオプションであり、使用するかどうかは主にコーディング スタ...
この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...
この記事は、WeChat アプレットを使用して作成された簡単な計算機です。興味のある方はご覧ください...
目次解決策1解決策2テーブルを作成するときに、興味深い問題に遭遇しました。「指定されたキーが長すぎま...
ユーザーがログアウトした後、ブラウザの戻るボタンがクリックされると、Web アプリケーションは保護さ...
XML価格照会のクエリデータにはリストが含まれているため、コレクションが必要です <結果マップ...
目次1. テレポートの使用2. モーダルダイアログコンポーネントを完成させる3. コンポーネントのレ...
この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
目次概要実装保護エージェント仮想エージェント画像の遅延読み込みを実現する仮想プロキシ概要プロキシ パ...
HTML の再利用は、あまり話題に上らない言葉です。今日は、この問題を次のようにまとめたいと思います...