パフォーマンスを最適化するためのアプローチ方法

このページの目的は、実稼働 Web サイトのパフォーマンス最適化の問題に対処する方法について、さらなるアドバイスを提供することです。

React で React.lazy} とsuspense} を使用して、反応制作 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 ファイルのサイズを最小限に抑えることができました。

これからさらに多くのことが登場する予定ですので、ご期待ください...ありがとう

以上がパフォーマンスを最適化するためのアプローチ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。