Angular は、効率的で洗練されたシングルページ アプリケーション (SPA) を開発するために設計された Google の主力のオープン ソース Web アプリケーション フレームワークです。 これは、Mac、Windows、Linux全体で最新のプログレッシブ ウェブ アプリ、モバイルおよびデスクトップにインストールされた アプリケーションを構築できるクロス開発プラットフォームです。 強力な開発エコシステムとは別に、Angular は、設計パターンに従ってプロジェクトを構築、拡張、および維持するためのクリーンな構造を提供します。 これにより、開発者はコンポーネントを簡単に組み合わせることができ、コンポーネントを分離したスムーズなアプリケーション設計が可能になります。
ただし、Angularアプリケーションを構築するためのコードを書くだけでは、後でパフォーマンス の問題や読み込み時間の遅延につながる可能性があります。 フレームワークの最新機能を使用して作業し、プロジェクト構造、ファイル、コードを熱心に再編成することは、開発者が全体的なパフォーマンスを最適化するために実行するアクションのほんの一部です。 超高速の読み込み時間に対する今日の高い期待により、開発者は、アプリケーションのパフォーマンスを向上させるために、ビルドとデプロイの 時間 、コード強化手法、実行時にアプリのメトリックを監視する運用戦略など、他の領域に注意を払う必要があります。
アプリケーションのパフォーマンスと読み込み時間を決定する際の問題
Angular は、動的な Web ページを提供する最新のタイプスクリプト ベースのフレームワークであるため、パフォーマンスと読み込み時間を監視する上でいくつかの課題を提供します。 ウェブ ページが読み込まれると、SPA はブラウザーで新しいナビゲーションをトリガーしないため、新しいコンテンツがページにレンダリングされるタイミングを正確に測定するのは面倒です。 したがって、ANGular はサーバーへの新しいブラウザー要求をトリガーしないため、HTTP 監視ツール (および API 監視ツール) は、読み込み時間を最適化するための重要なメトリックを提供しません。
さらに、HTTP 応答によって Web ページから送信された要求の結果が判断されるにもかかわらず、埋め込まれた JavaScript ファイルと関連リソースが解析、実行、およびユーザーがページを完全に操作できるまでレンダリングされる場合、実際の読み込み時間を把握するのに不足しています。 クライアント側から正確な読み込み時間を受信するには、ブラウザで JavaScript イベントをテストおよび監視する方法について、異なるアプローチが必要です。
読み込み時間を最適化するツール
Angular は、アプリケーションの負荷時間を短縮し、時間の経過とともにパフォーマンスを監視するのに役立つツールと手法のリストを提供します。 アプリケーションの初期読み込み時間を短縮し、ページナビゲーションを高速化するのに役立つこれらの手法のいくつかは、事前に行われる (AoT) コンパイル、 コード分割 、モジュール のプリロードです。 これらの手法について詳しく説明します。
事前コンパイル
Angular アプリケーションをコンパイルする主な方法は、実行時に Web ブラウザーでアプリケーションをコンパイルする Just-In-Time (JiT) と、名前の状態としてアプリケーションをビルド時にコンパイルする事前設定 (AoT) の 2 つがあります。 AoT コンパイラは、Web ブラウザが HTML コードをダウンロードする前に、ビルドプロセス中に HTML コードと TypeScript コードをアセンブルします。
アプリケーションがブートストラップにかかる時間を大幅に短縮することで、レンダリングプロセスを短縮できます。 このようにして、Web ブラウザーは実行可能コードをロードし、アプリケーションのコンパイルを待たずにアプリケーションを即座にレンダリングできるようにします。 さらに、プリコンパイルされたコードは、HTMLテンプレートや外部CSSなどのリソースをアプリ内に追加することで、外部ソースへの 非同期 要求の数を減らします。 したがって、コンパイルされたコードは、これらのファイルに対する個別の AJAX 要求を軽減します。 したがって、ユーザー エクスペリエンスはよりスムーズかつ迅速になります。
コード分割
つまり、コード分割によってアプリケーションの JavaScript バンドルが分離され、アプリケーションの機能が危険にさらされることはありません。 初期読み込み時にメインの JavaScript コードに対する制御を維持します。 コードの分割は、コードの重複を防ぎながら SplitChunksPlugin の助けを借りて、エントリ ポイント、動的に読み込まれたモジュール、共有コードなど、アプリケーション内のさまざまなレベルで行うことができます。
Angular アプリでのコード分割には、コンポーネント レベルのコード分割とルート レベルのコード分割 の 2 つの主要 な方法があります。 2 つのアプローチの主な違いは、ルート ナビゲーションがなくても、コンポーネント レベルのコード分割によって個々のコンポーネントがラグ的に読み込まれるのに対し、ルート レベルのコード分割では個々のルートが怠惰に読み込まれる点です。 いずれの場合も、両方のアプローチは、アプリのTTI(インタラクティブへの時間)を考慮してテストすることができます。 アプリケーションの応答にかかる時間を測定するため、TTI は比較する優れたパフォーマンス 指標です。 つまり、ユーザーがアプリケーションと対話できるようにアプリケーションの読み込みにかかる時間。
モジュールのプリロード
モジュールのプリロードはAngularアプリケーションで提供される技術で、確立された規則に従ってモジュールをできるだけ早くロードすることができます。 特定のイベントが発生した場合、または状況に応じて選択された数個のモジュールを同時にプリロードできます。 開発者は、モジュールの読み込みにかかる時間と、プリロード戦略を使用する固有の価値を確認できます。 Angular でモジュールをプリロードすることは、すべての一括読み込みモジュールが正常にロードされた直後にアプリケーションモジュールがロードされる点を除いて、遅延読み込みとよく似ています。 この方法では、ユーザーが遅延読み込みモジュールに移動すると、初期モジュールが最初にロードされるため、アプリケーションの初期読み込みが速くなるという利点を持つ場合、可能な待ち時間は破棄されます。
Angular のデフォルトのプリロード戦略は 、すべてのモジュールのプリロード と NoPreloading です。 1 つ目は、すべての遅延読み込み可能モジュールがプリロードされ、後者はプリロードを無効にすることを意味します。 PreloadAllModules を使用する場合、アプリケーションに多数のモジュールがある場合、アプリケーションがボトルネックになる可能性があります。 カスタムプリロード戦略を検討すると有益である可能性があります。
カスタム プリロード戦略を使用するという概念は、エンタープライズ シナリオではより意味を持つ場合があります。 たとえば、リソースコストの低いモジュールよりも、最も高価なモジュールを最初にプリロードすることは、開発者が使用できるアプローチです。 さらに、モジュールがプリロードされる瞬間も、ロード時間を短縮する上で重要な役割を果たします。
ロードビューを使用した角度アプリケーションのロードテスト
LoadViewは、HTTP監視ツールの制限にアプローチし、Angular開発者がクライアント側でアプリケーションを制御、監視、最適化するために現在持っているツールを強化するための革新的で包括的なソリューションを提案します。 LoadView はクラウドベースのロード テスト プラットフォームであり、数千の同時接続をリアルタイムでシミュレートすることで、Web サイト、ウェブ アプリケーション、API のストレス テスト監視を提供し、ボトルネックの特定と全体的なパフォーマンスの検証に役立ちます。
アカウント を作成した後、開発者は、テスト対象の Web サイトまたはアプリケーションを保存するデバイスを作成して、Web サイトと Web アプリケーションをテストできます。 Angular 開発者は、Web サイトオプションを選択することで、何千人ものユーザーが同時にページにアクセスしようとするシナリオを構成することで、アプリケーションのランディングページまたはログインページの初期読み込み時間をテストできます。 一方、Angular 開発者は Web アプリケーション オプションを選択することで、 アプリケーションの特定のユース ケースのロード時間をスクリプト化してテストできます。
たとえば、フォームへの入力、アプリケーション内ルートの移動、サーバーからの読み込まれたデータの並べ替え、および一般的にアプリの TTI を測定します。 LoadView を使用すると、ユーザーはテストロードタイプを 3 つの異なる方法 でカスタマイズし、一定期間に確立する接続数を設定する実行プランを作成できます。 さらに、LoadViewは、Webサイトに接続されている仮想ユーザーの地理的 分布 を調整する可能性を持つことにより、さらに一歩進んでいます。
LoadView は、 従来の方法と比較して、負荷テスト プロセスを自動化するための効率的で費用効果の高い方法をエンジニアに提供します。 コストのかかる投資と時間のかかるプロセスが不要になります。 開発者と テスター は、割り当てられた予算内にとどまり、インフラストラクチャを設定することを心配する必要はありません。 彼らは最善を尽くす方法に集中でき、テストを実行しています。 実際のブラウザーベースのテストでは、結果と洞察がユーザー体験に直接結び付けられ、アプリケーションがピーク負荷シナリオに耐えられるようになります。
最後に、LoadView には、 シミュレーションの結果の完全な詳細なレポートを表示する機能があります。 仮想ユーザー接続を確立するためのシナリオ実行プラン、ユーザーごとの平均応答時間、およびシナリオの実行中に発生したセッションごとのエラー数をグラフィカルに表示できます。 これらのチャートとパフォーマンスデータは、シミュレーションの特定の瞬間の詳細な情報を調べ、ページにレンダリングされたすべての要素の読み込み時間に関する重要な洞察を得る機会を与えます。 これは、開発者がアプリのTTIを遅らせ得る特定の要素に対してアクションを実行することができるので、Angularアプリケーションにとって非常に有益です。 この意味で、LoadView は JavaScript イベントを正確にテストおよび監視してクライアント側でのロード時間をテストし、フロントエンド開発者が自社の下に持つべき強力な資産となるというものです。
結論: 角度 Web アプリケーションのパフォーマンス
現在の要求は、現代の Web アプリのパフォーマンスの面でバーを上げます。 今日の DevOps チームは、アプリケーションの応答時間とアプリケーション TTI が、新しいアプリケーションが市場で競争するチャンスを得るための重要な要素となる点に留意する必要があります。 Angular 開発者は、多くの場合、アプリケーションを設計する際に、AoT コンパイル、コード分割、プリロードの手法などの負荷時間を短縮する手法を継続的に評価し、さらに一歩を踏み出す必要があります。 LoadView を使用してクライアント側の操作とメトリックを継続的にテストおよび監視し、最高のユーザー エクスペリエンスとアプリケーション パフォーマンスを保証します。
詳細については、 LoadView Web サイトにアクセスし、無料試用版にサインアップしてください。 開始に役立つ最大 5 つの無料ロード テストを受け取ります 。
角度 Web アプリケーションの監視
Angularアプリケーションのデプロイ後のパフォーマンスについては、 当社のWebサイトおよび ウェブ アプリケーション監視ソリューションであるDotcom-Monitorを確認してください。 Dotcom-Monitor ソリューションには、実際のブラウザー、リアルタイムアラート、パフォーマンスレポート、ダッシュボードなど、Angular Web アプリケーションを監視するために必要なすべての機能と利点が備わっています。 さらに、Angular Web アプリケーションのロード テスト用に記録されたスクリプトは、監視プラットフォームに持ち越すことができるため、スクリプトを再記録する必要はありません。 2つのソリューションは同じ インターフェイスを使用するため、両方のソリューション間のバウンスが簡単で簡単です。 Angular アプリケーションの Web アプリケーションの監視を無料で試してみてください。