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

您似乎嘗試在 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 檔案的大小。

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