開発者は、ブラウザでUIコンポーネントを処理して不要なナビゲーションなしで更新できるため、あらゆる種類のReactアプリを構築するのが大好きです。 しかし、それにはコストがかかります。 Reactアプリのサイズは、ほとんどの ウェブ アプリケーションでかなり大きくなる可能性があり、パフォーマンスが低下します。 その理由は、Reactはフロントエンドライブラリであり、それ自体ではWebサイトやアプリケーションのパフォーマンスを向上させないためです。さまざまな側面で正しく構成および最適化する必要があります。 また、多くの ユーザーを Webサイトに引き付けることを計画している場合は、トラフィックの多い状況でのパフォーマンスを最適化して、不必要な問題を回避する必要があります。
これらの理由から、ベストプラクティスの使用方法と ウェブ アプリケーションを最適化する方法を知ることは、開発者または製品マネージャーとして、Reactアプリが遅れているのではなく、一貫性のある優れたユーザーエクスペリエンスを提供することを保証するために不可欠です。 この ブログでは、特に トラフィックの多いシナリオで、Reactアプリのパフォーマンスを向上させる方法を学習します。
Reactアプリのパフォーマンスを向上させるためのヒント
反応する純粋なコンポーネント
プリミティブデータを使用するコンポーネントの場合、レンダリング時間を短縮するために shouldComponentUpdate() 関数の実装を内部的に使用する React.PureComponents 基本クラスを使用できます。 この小さいながらもスマートなプラクティスにより、コンポーネントの読み込み時間を大幅に改善できます。
不変データ構造
必要なデータ変更を含むオブジェクトコピーを作成して、オブジェクトを直接変更することは避けてください。 オブジェクトの状態に変更があった場合にこのプロセスを自動的に適用する不変のデータ構造を使用します。 これにより、状態変化の検出が容易になり、Reactアプリの全体的なパフォーマンスが向上します。
プロダクションビルド
コードに関する警告やその他の有用な洞察を提供するために、Reactにはファイル全体に分散されたノード環境チェックがあります。 これは開発者に役立ちますが、運用環境にアプリを展開するときにパススルーしても意味がありません。 これらの不要なコード行を削除するには、ベストプラクティスとしてnpm run build を使用して本番ビルドを作成し、React アプリのパフォーマンスを向上させます。
圧縮 (Gzip または Brotli)
クライアント側の JavaScript の読み込みを高速化するには、アプリケーションサーバーで Gzip または Brotli を使用して JavaScript コードを圧縮します。 これにより、フェッチと配信が高速になり、読み込み時間とコンポーネントのレンダリングが高速化されます。
開発者ツールの反応
これは、Chrome、Firefoxの拡張機能として利用可能であり、反応コンポーネントを異なる色で強調表示することにより、反応コンポーネントの不要なレンダリングを識別するのに役立ちます。 Reactアプリで作業しているときにインストールして開くことができます。 [更新の強調表示]ボックスに、緑、青、黄、または赤でマークされた反応コンポーネントが表示されます。 赤が最も頻繁な更新であるため、これらの色は不要で頻繁なレンダリングの可能性を示しています。 このようにして、任意の要素/コンポーネントをクリックして、レンダリングサイクルの指示色に基づいて最適化が必要かどうかを検査できます。
Chrome DevTools
Chrome開発ツールは、Chromeブラウザで実行されるGoogleによって提供され、 ウェブ の変更 を簡単に編集および視覚化できます。 これらのツールは、 ビルドを行わなくても、reactアプリの実行時パフォーマンスの問題を分析するのに役立ちます。 Chrome DevTools を使用すると、コンポーネントの読み込みと読み込み時間を確認して、潜在的なボトルネックや不要なレンダリングを特定し、コードを最適化できます。
ロードビューを使用した反応アプリのパフォーマンスの改善
まず、 LoadView は、Web サイトの仮想ユーザーをシミュレートして、さまざまなマトリックスのパフォーマンスを確認するクラウドベースの ロード テスト ツールです。 これはブラウザベースの パフォーマンステスト ツールであり、Reactアプリなどの最新のJavaScriptアプリケーションがレンダリングの問題やその他のボトルネックを正確に検出するのに最適です。 LoadViewの仮想ユーザーは、実際のユーザーの行動に合わせて40 +の実際のブラウザとデバイスを使用して生成され、最高のエンドユーザーエクスペリエンスのためにWebサイトを微調整するのに役立ちます。 LoadView は、複数の地理的な場所からユーザー負荷を生成し、テスト シナリオにさらに付加価値を与えて、場所固有の動作とパフォーマンスを分析します。
React アプリはブラウザーのアクションに大きく依存するため、 LoadView は、複雑なユーザーの動作とパスをシミュレートして、反応コンポーネントのレンダリングの分析に役立つ強力な EveryStep Web レコーダー を提供します。 EveryStep Web レコーダーを使用すると、 選択、マウス クリック イベント、マウス アップ/ダウン イベント、移動、キー押下/アップ/ダウン イベント、ホバー、人間 による検証 チェック、並べ替え、フィルター処理などの複雑なユーザー操作を簡単にキャプチャして、コンポーネントがこれらのイベントでどのようにレンダリングされるかを確認できます。
開発者は、LoadView を使用してコンポーネントの読み込み頻度とレンダリング時間を綿密に監視し、運用環境のユーザーに影響を与える前に問題を特定できます。
それだけじゃないです。 時間帯に多数のユーザーがWebサイトにアクセスすると、Webサイトのパフォーマンスが低下し、サーバーがダウンして、ユーザーに大きな問題が発生し、ブランドの評判が損なわれる可能性があります。 トラフィックが多いときにWebサイトのパフォーマンスが悪い場合は、プロモーションイベント中に大きな収益損失を被る可能性もあります。
Reactアプリケーションの包括的なロードテストを実行して、トラフィックのピーク時にサーバーとWebサイトのリソースがどのように使用されているかを確認し、パフォーマンスのボトルネックを特定してプロアクティブに取り除くことができます。 これは、Reactを使用しているeコマースWebサイトまたはニュースWebサイトがある場合に特に重要です。
結論:Reactアプリのパフォーマンスを向上させるためのヒント
最新のアプリケーションはJavaScriptを多用し、ブラウザに依存してリアルタイムのエクスペリエンスとスムーズなブラウジングを提供します。 Reactは、優れたデザインでより高速なアプリケーションを構築するための最も人気のあるJavaScriptフレームワークの1つです。 ただし、Reactアプリケーションはサイズが急速に大きくなり、パフォーマンスの問題や不具合を引き起こす可能性があります。 また、他のアプリケーションと同様に、トラフィックが多いとユーザーエクスペリエンスに大きな影響を与える可能性があります。 コーディングと デプロイのベストプラクティスとツールを使用して、コードを最適化し、Reactアプリケーションのパフォーマンスを向上させることができます。
LoadView は、最新のアプリケーションのパフォーマンスを最適化するために作成されたクラウドベースのツールです。 LoadView には、テスト後に生成された詳細なテスト レポートを使用して、潜在的なボトルネックとパフォーマンスの問題を特定するために使用できる多くの機能が用意されています。 これらのレポートには、リソース使用率とパフォーマンスメトリクスに関する詳細が含まれており、React アプリをすばやく最適化して、トラフィックのピーク時に読み込み時間とパフォーマンスを向上させるのに役立ちます。
LoadView にサインアップ して、最大 5 つの無料ロード テストを実行します。