如何進行效能優化

此頁面的目的是提供更多有關如何處理生產網站效能最佳化問題的建議。

您似乎嘗試在 React 中使用 React.lazy} 和 suspense} 在 React 生產網站上劃分捆綁塊；但是，這並沒有給您的網絡性能得分帶來預期的改善。

但是為什麼會這樣呢？

鑑於您的製作網站需要一些額外的東西...

我最近被指派了一項職責來提高生產網站的效能。我最初認為我們應該更懶地加載每條路線，但我很快就意識到這已經完成了。

我也開始想知道接下來會發生什麼事。

我安裝了 webpack 捆綁分析器外掛程式並嘗試分析之後的每個部分。接下來，我就如何提高效能提出了許多建議。

Main.bundle.js
主包大小太大，導致下載時間和解析時間增加。

如何破壞main.bundle.js？
就我而言，我的主包有很多與翻譯相關的 json，主包大小增加了 1.5 MB。

我確實使用來自 main.js 套件的延遲導入來取消翻譯。這提供了 40% 的效能得分優化。但這還沒有完成，因為我們的燈塔性能得分僅達到 25 到 35。

然後我開始查看其他潛在的大文件。

其中之一是 moment js，它有許多我們的網站沒有使用的語言環境。用輕量級程式庫取代moment js 是解決此問題的一種方法，但這樣做將需要更多程式碼修改並增加我測試整個網站的工作量（這是我以前沒有做過的事情），這可能會導致更多錯誤。然後我決定弄清楚如何擺脫那些不需要的區域；幸運的是，webpack 插件已經可用。透過利用該插件 [ContextReplacementPlugin]，我能夠最小化 moment.js 檔案的大小。

敬請關注，更多內容即將推出...謝謝

以上是如何進行效能優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！