React 被大量用於前端密集型應(yīng)用程序，具有其獨(dú)特的性能和尺寸優(yōu)化方式。改進(jìn)兩者將對(duì) React 套件大小產(chǎn)生相當(dāng)大的可衡量的影響?？紤]到我們專注於客戶端渲染的應(yīng)用程序，套件大小越小，載入時(shí)間越快。

伺服器端渲染將進(jìn)一步縮短載入時(shí)間。在伺服器端渲染中，當(dāng)使用者要求網(wǎng)頁(yè)時(shí)，React 元件會(huì)在伺服器本身中渲染為 HTML 程式碼。然後這個(gè)預(yù)先渲染的頁(yè)面被送到瀏覽器，讓使用者立即看到頁(yè)面，而無(wú)需 JS 載入時(shí)間的開(kāi)銷。

但這完全是一個(gè)不同的故事。讓我們主要專注於透過(guò)在程式碼中進(jìn)行調(diào)整來(lái)改善包包大小來(lái)嘗試改進(jìn)客戶端呈現(xiàn)的網(wǎng)站。讓我們深入探討一下。

1. 程式碼分割和動(dòng)態(tài)導(dǎo)入

React 程式碼的「捆綁」是追蹤所有匯入和程式碼並將其組合成一個(gè)名為「Bundle」的單一檔案的過(guò)程。 Webpack、Browserify 等已經(jīng)為我們做到了這一點(diǎn)。

Webpack 有一個(gè)名為「程式碼分割」的功能，負(fù)責(zé)將單一套件分割成更小的區(qū)塊，對(duì)區(qū)塊進(jìn)行重複資料刪除，並「按需」導(dǎo)入它們。這會(huì)顯著影響應(yīng)用程式的載入時(shí)間。

使用 React Suspense 延遲載入元件 (React 18)：與動(dòng)態(tài)導(dǎo)入結(jié)合將顯示元件載入時(shí)間的明顯改善。

通常，當(dāng)我們?cè)诟冈袑?dǎo)入子元件時(shí)，我們是靜態(tài)導(dǎo)入的。為了防止在我們實(shí)際必須渲染它之前導(dǎo)入該元件，我們可以將動(dòng)態(tài)導(dǎo)入與 React Suspense 結(jié)合使用。 React Suspense 可以按需載入元件。它顯示了 Fallback UI，同時(shí)動(dòng)態(tài)導(dǎo)入然後渲染相應(yīng)的元件。

2. 搖樹(shù)

這是 JavaScript 捆綁程式使用的技術(shù)，用於在建立捆綁包之前刪除所有未使用的程式碼。 ES6程式碼可以進(jìn)行tree-shaking；但是，基於 CommonJS 的程式碼（即使用「require」）不能進(jìn)行 tree-shaken。

Webpack Bundle Analyzer 是一個(gè)插件，可幫助您透過(guò)互動(dòng)式地圖視覺(jué)化 Webpack 的大小。

然後設(shè)定您的 webpack 以將上述內(nèi)容新增為外掛程式：

確保您的腳本配置為執(zhí)行 Webpack：

運(yùn)行yarn build來(lái)產(chǎn)生report.html，它將幫助您有效地視覺(jué)化您的套件大小。

它看起來(lái)像這樣：

3. 並發(fā)渲染

讓我們先了解什麼是阻塞渲染。阻塞渲染是指主執(zhí)行緒（UX 更新）被阻塞，因?yàn)?React 在背景執(zhí)行一些不太重要的任務(wù)。 React 16 之前都是這種情況。

React 18 引入了並發(fā)功能，這意味著它將：

• 讓您更能控制後臺(tái)更新的排程方式，並透過(guò)不阻塞主執(zhí)行緒來(lái)創(chuàng)建流暢的最終使用者體驗(yàn)。
• 啟動(dòng)狀態(tài)更新的自動(dòng)批次：批次是指將因多次狀態(tài)更新而導(dǎo)致的多次重新渲染進(jìn)行分組，使得狀態(tài)只更新一次。

使用 startTransition() 鉤子將 React 更新視為非緊急更新，幫助 React 優(yōu)先考慮緊急更新，例如使用者輸入和使用者與元件的互動(dòng)。

在這個(gè)例子中，當(dāng)輸入值改變時(shí)，handleChange函數(shù)被呼叫。 startTransition 函數(shù)用於將對(duì)清單狀態(tài)的更新標(biāo)記為非緊急。這允許 React 優(yōu)先更新值狀態(tài)，確保即使在清單很大時(shí)輸入也能保持回應(yīng)。

使用 useDeferredValue 鉤子延遲一個(gè)值（通常是昂貴的計(jì)算），直到 UI 不那麼繁忙。

在此範(fàn)例中，useDeferredValue 掛鉤用於延遲值狀態(tài)，直到 UI 不那麼繁忙。這有助於透過(guò)將大列表的渲染推遲到處理輸入更新之後來(lái)保持輸入回應(yīng)。

並發(fā)渲染的主要優(yōu)點(diǎn)：

• 改進(jìn)的回應(yīng)能力：透過(guò)允許 React 中斷渲染工作，UI 仍然可以回應(yīng)使用者互動(dòng)。
• 優(yōu)先權(quán)：React 可以優(yōu)先考慮緊急更新而不是非緊急更新，確保更流暢的使用者體驗(yàn)。
• 更好的效能：可以推遲昂貴的更新，減少對(duì)主執(zhí)行緒的影響並提高應(yīng)用程式的整體效能。

4.支援資源預(yù)載（React 19）

如果您知道應(yīng)用程式在載入過(guò)程中會(huì)取得任何大量資源，那麼預(yù)先載入資源是一個(gè)好主意。這些資源可以是字體、圖像、樣式表等

預(yù)先載入有益的場(chǎng)景：

• 子元件將使用資源。在這種情況下，您可以在父元件的渲染階段預(yù)先載入它。
• 在事件處理程序中預(yù)先載入它，該事件處理程序會(huì)重定向到將使用此資源的頁(yè)面/元件。事實(shí)上，這是比在渲染期間預(yù)先載入更好的選擇。

有趣的事實(shí)：實(shí)施預(yù)先載入後，包括Shopify、Financial Times 和Treebo 在內(nèi)的許多網(wǎng)站都發(fā)現(xiàn)以用戶為中心的指標(biāo)（例如互動(dòng)時(shí)間和用戶感知延遲）提高了1秒。

---

請(qǐng)留下回饋

我希望您覺(jué)得這個(gè)部落格有幫助！您的回饋對(duì)我來(lái)說(shuō)非常寶貴 ，所以請(qǐng)?jiān)谙旅娴脑u(píng)論中留下您的想法和建議。

請(qǐng)隨時(shí)在 LinkedIn 上與我聯(lián)繫以獲取更多見(jiàn)解和更新。讓我們保持聯(lián)繫，繼續(xù)共同學(xué)習(xí)和成長(zhǎng)！

以上是快速優(yōu)化您的 ReactJS 應(yīng)用程式的效能和大小的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！