ページを選択

Angular は、効率的で洗練されたシングルページ アプリケーション (SPA) を開発するために設計された Google の主力のオープン ソース ウェブ アプリケーション フレームワークです。 これは、Mac、Windows、Linux全体で最新のプログレッシブウェブアプリ、モバイルおよびデスクトップインストールアプリケーションを構築できるクロス開発プラットフォームです。 強力な開発エコシステムとは別に、Angular は、設計パターンに従ってプロジェクトを構築、拡張、および維持するためのクリーンな構造を提供します。 これにより、開発者はコンポーネントを簡単に組み合わせることができ、分離されたコンポーネントを使用してアプリケーション設計をスムーズに行うことができます。

ただし、Angular アプリケーションを構築するコードを記述するだけで、後でパフォーマンスの問題が発生し、読み込み時間が遅くなる可能性があります。 フレームワークの最新機能を使用して作業し、プロジェクト構造、ファイル、コードを熱心に再編成することは、開発者が全体的なパフォーマンスを最適化するために実行するアクションのほんの一部です。 今日の高速ロードタイムに対する高い期待は、開発者がアプリケーションのパフォーマンスを向上させるために、ビルドとデプロイの時間、コード拡張技術、実行時にアプリのメトリックを監視する運用戦略など、他の分野に注意を払う必要があります。

 

アプリケーションのパフォーマンスと読み込み時間を決定する際の問題

Angular は、動的な ウェブ ページを提供する最新のタイプスクリプト ベースのフレームワークであるため、パフォーマンスと読み込み時間を監視する上でいくつかの課題を提供します。 ウェブ ページが読み込まれた後に、新規コンテンツがページに表示されるタイミングを正確に測定するのは面倒です。 したがって、ANGular はサーバーへの新しいブラウザー要求をトリガーしないため、HTTP 監視ツール (および API 監視ツール) は、読み込み時間を最適化するための重要なメトリックを提供しません。

さらに、HTTP 応答によって ウェブ ページから送信された要求の結果が判断されるにもかかわらず、埋め込まれた JavaScript ファイルと関連リソースが解析、実行、およびユーザーがページを完全に操作できるまでレンダリングされる場合、実際の読み込み時間を把握するのに不足しています。 クライアント側から正確な読み込み時間を受信するには、ブラウザで JavaScript イベントをテストおよび監視する方法について、異なるアプローチが必要です。

 

読み込み時間を最適化するツール

Angular は、アプリケーションの負荷時間を短縮し、時間の経過とともにパフォーマンスを監視するのに役立つツールと手法のリストを提供します。 アプリケーションの初期読み込み時間を短縮し、ページナビゲーションを高速化するのに役立つこれらの手法のいくつかは、事前に行われる (AoT) コンパイルコード分割 、モジュール のプリロードです。 これらの手法について詳しく説明します。

事前コンパイル

Angular アプリケーションをコンパイルする主な方法は、実行時に ウェブ ブラウザーでアプリケーションをコンパイルする Just-In-Time (JiT) と、名前の状態としてアプリケーションをビルド時にコンパイルする事前設定 (AoT) の 2 つがあります。 AoT コンパイラは、ウェブ ブラウザが HTML コードをダウンロードする前に、ビルドプロセス中に HTML コードと TypeScript コードをアセンブルします。

アプリケーションがブートストラップにかかる時間を大幅に短縮することで、レンダリングプロセスを短縮できます。 このようにして、ウェブ ブラウザーは実行可能コードをロードし、アプリケーションのコンパイルを待たずにアプリケーションを即座にレンダリングできるようにします。 さらに、プリコンパイルされたコードは、アプリ内に HTML テンプレートや外部 CSS などのリソースを追加することで、外部ソースへの非同期要求の数を減らします。 したがって、コンパイルされたコードは、これらのファイルに対する個別の AJAX 要求を軽減します。 したがって、ユーザー エクスペリエンスはよりスムーズかつ迅速になります。

 

コード分割

つまり、コード分割によってアプリケーションの JavaScript バンドルが分離され、アプリケーションの機能が危険にさらされることはありません。 初期読み込み時にメインの JavaScript コードを制御できます。 コードの分割は、コードの重複を防ぎながら SplitChunksPlugin の助けを借りて、エントリ ポイント、動的に読み込まれたモジュール、共有コードなど、アプリケーション内のさまざまなレベルで行うことができます。

Angular アプリでのコード分割には、コンポーネント レベルのコード分割とルート レベルのコード分割 の 2 つの主要 な方法があります。 2 つのアプローチの主な違いは、ルート ナビゲーションがなくても、コンポーネント レベルのコード分割によって個々のコンポーネントがラグ的に読み込まれるのに対し、ルート レベルのコード分割では個々のルートが怠惰に読み込まれる点です。 いずれの場合も、両方のアプローチは、アプリのTTI(インタラクティブへの時間)を考慮してテストすることができます。 アプリケーションの応答にかかる時間を測定するため、TTI は比較する優れたパフォーマンス 指標です。 つまり、ユーザーがアプリケーションと対話できるようにアプリケーションの読み込みにかかる時間。

 

モジュールのプリロード

モジュールのプリロードはAngularアプリケーションで提供される技術で、確立された規則に従ってモジュールをできるだけ早くロードすることができます。 特定のイベントが発生した場合、または状況に応じて選択された数個のモジュールを同時にプリロードできます。 開発者は、モジュールの読み込みにかかる時間と、プリロード戦略を使用する固有の価値を確認できます。 Angular でモジュールをプリロードすることは、すべての一括読み込みモジュールが正常にロードされた直後にアプリケーションモジュールがロードされる点を除いて、遅延読み込みとよく似ています。 この方法では、ユーザーが遅延読み込みモジュールに移動すると、初期モジュールが最初にロードされるため、アプリケーションの初期読み込みが速くなるという利点を持つ場合、可能な待ち時間は破棄されます。

Angular のデフォルトのプリロード戦略は 、すべてのモジュールのプリロード NoPreloading です。 1 つ目は、すべての遅延読み込み可能モジュールがプリロードされ、後者はプリロードを無効にすることを意味します。 PreloadAllModules を使用する場合、アプリケーションに多数のモジュールがある場合、アプリケーションがボトルネックになる可能性があります。 カスタムプリロード戦略を検討すると有益である可能性があります。

カスタム プリロード戦略を使用するという概念は、エンタープライズ シナリオではより意味を持つ場合があります。 たとえば、リソースコストの低いモジュールよりも、最も高価なモジュールを最初にプリロードすることは、開発者が使用できるアプローチです。 さらに、モジュールがプリロードされる瞬間も、ロード時間を短縮する上で重要な役割を果たします。

 

ロードビューを使用した角度アプリケーションのロードテスト

LoadViewは、HTTP監視ツールの限界にアプローチし、Angular開発者がクライアント側でアプリケーションを制御、監視、最適化するために現在持っているツールを強化するための革新的で総合的なソリューションを提案しています。 LoadViewは、数千の同時接続をリアルタイムでシミュレートして、ボトルネックの特定と全体的なパフォーマンスの検証を支援することにより、ウェブ サイト、ウェブ アプリケーション、APIのストレステスト監視を提供するクラウドベースのロードテストプラットフォームです。

アカウント を作成した後、開発者は、テスト対象の ウェブ サイトまたはアプリケーションを保存するデバイスを作成して、ウェブ サイトと ウェブ アプリケーションをテストできます。 Angular 開発者は、ウェブ サイトオプションを選択することで、何千人ものユーザーが同時にページにアクセスしようとするシナリオを構成することで、アプリケーションのランディングページまたはログインページの初期読み込み時間をテストできます。 一方、Angular 開発者は ウェブ アプリケーション オプションを選択することで、 アプリケーションの特定のユース ケースのロード時間をスクリプト化してテストできます。

たとえば、フォームへの入力、アプリケーション内ルートの移動、サーバーからの読み込まれたデータの並べ替え、および一般的にアプリの TTI を測定します。 LoadView を使用すると、ユーザーはテストロードタイプを 3 つの異なる方法 でカスタマイズし、一定期間に確立する接続数を設定する実行プランを作成できます。 さらに、LoadViewは、ウェブサイトに接続されている仮想ユーザーの地理的分布を配置する可能性を持つことによって、さらに一歩を踏み出します。

LoadViewは、エンジニアに、従来の方法と比較して負荷試験プロセスを自動化する効率的でコスト効率の高い方法を提供します。 コストのかかる投資と時間のかかるプロセスが不要になります。 開発者やテスト担当者は、割り当てられた予算内にとどまり、インフラストラクチャを設定する心配はありません。 彼らは最善を尽くす方法に集中でき、テストを実行しています。 実際のブラウザーベースのテストでは、結果と洞察がユーザー体験に直接結び付けられ、アプリケーションがピーク負荷シナリオに耐えられるようになります。

最後に、LoadView にはシミュレーションの結果の詳細なレポートを表示する機能があります。 仮想ユーザー接続を確立するためのシナリオ実行プラン、ユーザーごとの平均応答時間、およびシナリオの実行中に発生したセッションごとのエラー数をグラフィカルに表示できます。 これらのチャートとパフォーマンスデータは、シミュレーションの特定の瞬間の詳細な情報を調べ、ページにレンダリングされたすべての要素の読み込み時間に関する重要な洞察を得る機会を与えます。 これは、開発者がアプリのTTIを遅らせ得る特定の要素に対してアクションを実行することができるので、Angularアプリケーションにとって非常に有益です。 この意味で、LoadView は JavaScript イベントを正確にテストおよび監視してクライアント側でのロード時間をテストし、フロントエンド開発者が自社の下に持つべき強力な資産となるというものです。

 

結論: 角度 ウェブ アプリケーションのパフォーマンス

現在の要求は、現代の ウェブ アプリのパフォーマンスの面でバーを上げます。 今日の DevOps チームは、アプリケーションの応答時間とアプリケーション TTI が、新しいアプリケーションが市場で競争するチャンスを得るための重要な要素となる点に留意する必要があります。 Angular 開発者は、多くの場合、アプリケーションを設計する際に、AoT コンパイル、コード分割、プリロードの手法などの負荷時間を短縮する手法を継続的に評価し、さらに一歩を踏み出す必要があります。 LoadView を使用してクライアント側の操作とメトリックを継続的にテストおよび監視し、最高のユーザー エクスペリエンスとアプリケーション パフォーマンスを保証します。

詳細については 、LoadView ウェブ サイトにアクセスして、無料試用版にサインアップしてください。 ロード テスト クレジットは$20 で受け取り 、開始に役立ちます。

角度 ウェブ アプリケーションの監視

あなたのAngularアプリケーションの展開後のパフォーマンスについては、当社のウェブサイトとウェブアプリケーション監視ソリューション、ドットコムモニターをチェックしてください。 Dotcom-Monitor ソリューションには、実際のブラウザー、リアルタイムアラート、パフォーマンスレポート、ダッシュボードなど、Angular ウェブ アプリケーションを監視するために必要なすべての機能と利点が備わっています。 さらに、Angular ウェブ アプリケーションのロード テスト用に記録されたスクリプトは、監視プラットフォームに持ち越すことができるため、スクリプトを再記録する必要はありません。 2つのソリューションは同じインターフェイスを使用するため、両方のソリューション間でバウンスが簡単で簡単です。 Angular アプリケーションの ウェブ アプリケーションの監視を無料で試してみてください。