このページの目的は、運用ウェブサイトのパフォーマンス最適化の問題に対処する方法について、より詳しいアドバイスを提供することです。

React で React.lazy} andsuspense} を使用して、React プロダクション Web サイトでバンドル チャンクを分割しようとしたようです。ただし、これによって Web パフォーマンス スコアが期待どおりに改善されることはありませんでした。

でも、なぜそうなってしまうのでしょうか?

本番の Web サイトに追加のものが必要だったとすると....

私は最近、制作ウェブサイトのパフォーマンスを向上させる任務を割り当てられました。最初は各ルートをもっとゆっくりロードすべきだと考えていましたが、これはすでに行われていることにすぐに気づきました。

私も次は何が起こるのかと思い始めていました。

webpackバンドルアナライザープラグインをインストールし、その後各部分を分析しようとしました。その後、パフォーマンスを向上させる方法について多くの提案がありました。

Main.bundle.js
メインバンドルのサイズが大きすぎるため、解析時間とともにダウンロード時間も増加しています。

main.bundle.js を壊す方法は?
私の場合、私のメインバンドルには翻訳に関連する多くのjsonが含まれており、メインバンドルのサイズが1.5 MB増加していました。

main.js バンドルから遅延インポートを使用して翻訳を削除しました。これにより、パフォーマンス スコアが 40% 最適化されます。しかし、灯台のパフォーマンス スコアが 25 から 35 に到達しただけなので、これはまだ完了していません。

その後、他の潜在的な大きなファイルを調べ始めました。

そのうちの 1 つは moment js で、これには私たちの Web サイトでは使用していなかったロケールが多数あります。この問題を解決するには、moment js を軽量ライブラリに置き換えることが 1 つの方法ですが、そうするとさらに多くのコード変更が必要になり、Web サイト全体をテストする作業負荷が増加します (これまでには行ったことのないことです)。これにより、さらに多くのエラーが発生する可能性があります。そこで私は、それらの望ましくない領域を取り除く方法を見つけ出すことにしました。幸いなことに、Webpack プラグインはすでに利用可能でした。そのプラグイン [ContextReplacementPlugin] を利用することで、moment.js ファイルのサイズを最小限に抑えることができました。

今後もたくさんの作品が登場する予定ですので、ご期待ください...ありがとうございます