快速優化您的 ReactJS 應用程式的效能和大小
- Linda Hamilton原創
- 2024-12-10 20:13:10632瀏覽
React 被大量用於前端密集型應用程序，具有其獨特的性能和尺寸優化方式。改進兩者將對 React 套件大小產生相當大的可衡量的影響。考慮到我們專注於客戶端渲染的應用程序，套件大小越小，載入時間越快。
伺服器端渲染將進一步縮短載入時間。在伺服器端渲染中，當使用者要求網頁時，React 元件會在伺服器本身中渲染為 HTML 程式碼。然後這個預先渲染的頁面被送到瀏覽器，讓使用者立即看到頁面，而無需 JS 載入時間的開銷。
但這完全是一個不同的故事。讓我們主要專注於透過在程式碼中進行調整來改善包包大小來嘗試改進客戶端呈現的網站。讓我們深入探討一下。
1. 程式碼分割和動態導入
React 程式碼的「捆綁」是追蹤所有匯入和程式碼並將其組合成一個名為「Bundle」的單一檔案的過程。 Webpack、Browserify 等已經為我們做到了這一點。
Webpack 有一個名為「程式碼分割」的功能，負責將單一套件分割成更小的區塊，對區塊進行重複資料刪除，並「按需」導入它們。這會顯著影響應用程式的載入時間。
使用 React Suspense 延遲載入元件 (React 18)：與動態導入結合將顯示元件載入時間的明顯改善。
通常，當我們在父元件中導入子元件時，我們是靜態導入的。為了防止在我們實際必須渲染它之前導入該元件，我們可以將動態導入與 React Suspense 結合使用。 React Suspense 可以按需載入元件。它顯示了 Fallback UI，同時動態導入然後渲染相應的元件。
2. 搖樹
這是 JavaScript 捆綁程式使用的技術，用於在建立捆綁包之前刪除所有未使用的程式碼。 ES6程式碼可以進行tree-shaking；但是，基於 CommonJS 的程式碼（即使用「require」）不能進行 tree-shaken。
Webpack Bundle Analyzer 是一個插件，可幫助您透過互動式地圖視覺化 Webpack 的大小。
然後設定您的 webpack 以將上述內容新增為外掛程式：
確保您的腳本配置為執行 Webpack：
運行yarn build來產生report.html，它將幫助您有效地視覺化您的套件大小。
它看起來像這樣：
3. 並發渲染
讓我們先了解什麼是阻塞渲染。阻塞渲染是指主執行緒（UX 更新）被阻塞，因為 React 在背景執行一些不太重要的任務。 React 16 之前都是這種情況。
React 18 引入了並發功能，這意味著它將：
- 讓您更能控制後台更新的排程方式，並透過不阻塞主執行緒來創建流暢的最終使用者體驗。
- 啟動狀態更新的自動批次：批次是指將因多次狀態更新而導致的多次重新渲染進行分組，使得狀態只更新一次。
使用 startTransition() 鉤子將 React 更新視為非緊急更新，幫助 React 優先考慮緊急更新，例如使用者輸入和使用者與元件的互動。
在這個例子中，當輸入值改變時，handleChange函數被呼叫。 startTransition 函數用於將對清單狀態的更新標記為非緊急。這允許 React 優先更新值狀態，確保即使在清單很大時輸入也能保持回應。
使用 useDeferredValue 鉤子延遲一個值（通常是昂貴的計算），直到 UI 不那麼繁忙。
在此範例中，useDeferredValue 掛鉤用於延遲值狀態，直到 UI 不那麼繁忙。這有助於透過將大列表的渲染推遲到處理輸入更新之後來保持輸入回應。
並發渲染的主要優點：
- 改進的回應能力：透過允許 React 中斷渲染工作，UI 仍然可以回應使用者互動。
- 優先權：React 可以優先考慮緊急更新而不是非緊急更新，確保更流暢的使用者體驗。
- 更好的效能：可以推遲昂貴的更新，減少對主執行緒的影響並提高應用程式的整體效能。
4.支援資源預載（React 19）
如果您知道應用程式在載入過程中會取得任何大量資源，那麼預先載入資源是一個好主意。這些資源可以是字體、圖像、樣式表等
預先載入有益的場景：
- 子元件將使用資源。在這種情況下，您可以在父元件的渲染階段預先載入它。
- 在事件處理程序中預先載入它，該事件處理程序會重定向到將使用此資源的頁面/元件。事實上，這是比在渲染期間預先載入更好的選擇。
有趣的事實：實施預先載入後，包括Shopify、Financial Times 和Treebo 在內的許多網站都發現以用戶為中心的指標（例如互動時間和用戶感知延遲）提高了1秒。
請留下回饋
我希望您覺得這個部落格有幫助！您的回饋對我來說非常寶貴 ，所以請在下面的評論中留下您的想法和建議。
請隨時在 LinkedIn 上與我聯繫以獲取更多見解和更新。讓我們保持聯繫，繼續共同學習和成長！
以上是快速優化您的 ReactJS 應用程式的效能和大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！