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