Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細な説明

しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築しました。サイトの再構築には約1週間かかりましたが、いざオンラインになってみると、アクセス速度が本当に遅く、我慢できないほどでした。記事数件しかない小さなサイトなのに、とても遅いので我慢できませんでした。私は完璧主義者ではありませんが、これではだめです。その後、パフォーマンスの研究に時間を費やしました。遅さには理由があることがわかりました。

React のようなフレームワークですか?

現在主流のフロントエンド フレームワークである React、Vue、Angular はすべてクライアント側レンダリングを使用します (サーバー側レンダリングはこの記事の範囲外です)。もちろん、これによりサーバーにかかる負荷が大幅に軽減されます。ブラウザに対する相対的な圧力が増大しました。つまり、多数の js ファイルをローカルで実行する必要があります。そして、これらの大きな js ファイルをサーバーからダウンロードするには時間がかかります。これらの js を再度実行するには時間がかかります。これがホームページの読み込みが遅くなる根本的な理由です。もちろんホームページだけですが、後続のキャッシュがあるので比較的高速です。では、速度を上げるにはどうすればいいのでしょうか?始めるには2つの方法があります

• 静的リソースのダウンロード速度を向上
• 実行速度を向上させるためにコードを最適化します

具体的な最適化の前に、私のブログ サイトのサーバー構成についてお話しします。

• Alibaba Cloud サーバー ECS
• システム: Ubuntu 16.04
• CPU: 1コア
• メモリ: 1GB
• MYSQLデータベース
• Nginx バージョン 1.16.1

テスト環境はFirefoxブラウザを使用しており、最適化前のアクセス速度は以下のとおりです

とても遅いと思いませんか？あまりにも遅いので、自分の人生に疑問を抱くほどです。 2,000 ワード以上のブログ記事を読み込むのに 6 秒かかります。自分のブログを参考に、段階的に最適化していきましょう。

静的リソースのダウンロード速度を向上

静的リソースのダウンロード速度を上げる方法は多数あります。 HTTP1.1 から HTTP2.0 にアップグレードしたり、gzip データ圧縮を有効にしたり、CDN を使用したりすることが、速度を向上させる最も効果的な方法です。私のウェブサイトも主にこれらの側面から一つ一つ最適化して速度を向上させています。

HTTP1.1 から HTTP2 へのアップグレード

アップグレード前はこんな感じでした

HTTP2.0にアップグレードすると次のようになります

では、どうやってアップグレードするのでしょうか?アップグレードにも条件が必要です。

• openssl 1.0.2+ (OpenSSL 1.0.2 は ALPN をサポートします)
• Nginx 1.9.5 以上

nginxとopensslのバージョンを渡すことができるかどうかはわかりません
nginx -V
上記の条件が満たされているかどうかを確認してください。これは簡単です。nginx設定ファイルにhttp2を追加するだけです。

サーバー{
   443 ssl http2 を聞く
   。
   。
   。
}

以上です。とても簡単ですよね？次に、nginx サーバーを再起動します。 (このアップグレードではアクセス速度が大幅に向上することはありません。)

gzipデータ圧縮を有効にする

上図からわかるように、転送列とサイズ列のデータは等しく、つまりファイルのサイズはファイルのサイズと同じであり、圧縮はまったく行われていません。1.4Mなどの大きなファイルの場合、圧縮が非常に必要です。さらに、これは単なる単純なブログサイトです。これが速度を低下させる主な原因の 1 つです。そのため、gzip 圧縮を実行する必要があります。では、gzip を有効にするにはどうすればよいでしょうか?それは非常に難しいですか？実際、それは非常に簡単です。Nginx はすでにこれをサポートしており、必要なのは簡単な設定だけです。同じ方法でnginx設定ファイルを変更します

サーバー{
    443 ssl http2 を聞く
    #...多くの gzip は途中で省略されます。
    gzip_バッファ 32 4k;
    gzip_comp_レベル6;
    gzip_min_length 200;
    gzip_types テキスト/css テキスト/xml アプリケーション/javascript アプリケーション/json;
}

で

• gzip on gzip 圧縮が有効であることを意味します。
• gzip_buffers 32 4k 、リクエストの圧縮を処理するために使用されるバッファの数とサイズを示します。このパラメータを設定する必要はなく、デフォルト値を使用してください。
• gzip_comp_level gzip 圧縮レベル。レベル 6 以降は増やすことは困難です。
• gzip_min_length 、返されるコンテンツがこの値（K単位）より大きい場合にのみgzip圧縮を使用します。値が0の場合、すべてのページが圧縮されます。
• gzip_types圧縮タイプ

同様に、nginx サーバーを再起動します。

図からわかるように、速度が大幅に向上しています。 「転送」列と「サイズ」列を見ると、サイズの違いが非常に大きいことがわかります。これら 2 つの手順を完了すると、速度は 6 秒から約 2 秒に短縮されました。
(このアップグレードはアクセス速度に最も大きな影響を与えます。)

注:もちろん、より良い方法は CDN アクセラレーションを使用することです。静的リソースを CDN します。速度を大幅に向上できます。

実行速度を向上させるためにコードを最適化します

複数のリクエストのテスト中。小さなファイルがまだたくさんありますが、実行にはかなり時間がかかります。もちろん、これはReactがDOMツリーを作成するなどの操作に関連しています。ただし、コードに最適化の余地があるかどうかはまだ確認できます。こんなに小さなウェブサイトにしては遅すぎました。私が書いたコードには時間のかかる処理が含まれているに違いないと思いましたが、実際にそうでした。ウェブサイトのこのコード

const markdownHtml = marked(content_mark || '');

Markdown を HTML に変換するには、ある程度の時間がかかります。記事が非常に大きい場合は、この時間を無視することはできません。
この JS 配列から文字列への実装メソッドをテストして、単語数の多い記事を解析したところ、慣例的に許容できない 100 ミリ秒以上かかりました。

この場合、マークダウンを保存するときに、データのコピーを 2 つ直接保存できます。1 つは元のマークダウン データで、もう 1 つはマークダウンが HTML に変換された後のデータです。ページがレンダリングされると、変換された HTML コードが直接取得されるため、変換時間が節約されます。

また、React の懶加載を利用して、webpack でパッケージ化するときにコードを分割し、最初の画面の読み込みのサイズを縮小することもできます。

もちろん、読み込みプロセス中のユーザーエクスペリエンスを向上させることも重要な部分です。実行速度を効果的に上げることはできませんが、ユーザーの満足度を高めることができます。諺にあるように、幸せな時は時間があっという間に過ぎてしまいます。

Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細説明に関するこの記事はこれで終わりです。Reactホームページの読み込みが遅い問題のパフォーマンス最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。