Vercel React 最佳實踐

針對 React 和 Next.js 應用程式的全面效能最佳化指南，由 Vercel 維護。包含 8 大類別共 45 條規則，依影響程度排序，用於指導自動化重構和程式碼產生。

適用時機

在以下情況時參考這些指南：

• 撰寫新的 React 元件或 Next.js 頁面

• 實作資料獲取（客戶端或伺服器端）

• 審查程式碼的效能問題

• 重構現有的 React/Next.js 程式碼

• 最佳化打包大小或載入時間

依優先級劃分的規則類別

優先級 類別 影響程度 前綴

1 消除瀑布流 關鍵 async-

2 打包大小最佳化 關鍵 bundle-

3 伺服器端效能 高 server-

4 客戶端資料獲取 中高 client-

5 重新渲染最佳化 中 rerender-

6 渲染效能 中 rendering-

7 JavaScript 效能 低中 js-

8 進階模式 低 advanced-

快速參考

1. 消除瀑布流（關鍵）

• async-defer-await

• 將 await 移至實際使用的分支中

• async-parallel

• 對獨立操作使用 Promise.all()

• async-dependencies

• 對部分依賴使用 better-all

• async-api-routes

• 在 API 路由中提早啟動 promise，延遲 await

• async-suspense-boundaries

• 使用 Suspense 串流內容

2. 打包大小最佳化（關鍵）

• bundle-barrel-imports

• 直接匯入，避免桶檔案

• bundle-dynamic-imports

• 對大型元件使用 next/dynamic

• bundle-defer-third-party

• 在 hydration 後載入分析/日誌程式庫

• bundle-conditional

• 僅在功能啟用時載入模組

• bundle-preload

• 在懸停/聚焦時預載入以提升感知速度

3. 伺服器端效能（高）

• server-cache-react

• 使用 React.cache() 進行每次請求的去重

• server-cache-lru

• 使用 LRU 快取進行跨請求快取

• server-serialization

• 最小化傳遞給客戶端元件的資料

• server-parallel-fetching

• 重組元件以平行化資料獲取

• server-after-nonblocking

• 使用 after() 進行非阻塞操作

4. 客戶端資料獲取（中高）

• client-swr-dedup

• 使用 SWR 自動去重請求

• client-event-listeners

• 去重全域事件監聽器

5. 重新渲染最佳化（中）

• rerender-defer-reads

• 不要訂閱僅在回呼中使用的狀態

• rerender-memo

• 將昂貴的運算提取到記憶化元件中

• rerender-dependencies

• 在 effect 中使用基本型別依賴

• rerender-derived-state

• 訂閱衍生的布林值，而非原始值

• rerender-functional-setstate

• 使用函式式 setState 以獲得穩定的回呼

• rerender-lazy-state-init

• 對昂貴的值使用函式傳遞給 useState

• rerender-transitions

• 對非緊急更新使用 startTransition

6. 渲染效能（中）

• rendering-animate-svg-wrapper

• 對 div 包裝器做動畫，而非 SVG 元素

• rendering-content-visibility

• 對長列表使用 content-visibility

• rendering-hoist-jsx

• 將靜態 JSX 提取到元件外

• rendering-svg-precision

• 降低 SVG 座標精度

• rendering-hydration-no-flicker

• 對僅客戶端資料使用內嵌腳本

• rendering-activity

• 使用 Activity 元件處理顯示/隱藏

• rendering-conditional-render

• 使用三元運算子，而非 && 進行條件渲染

7. JavaScript 效能（低中）

• js-batch-dom-css

• 透過 class 或 cssText 批次修改 CSS

• js-index-maps

• 為重複查找建立 Map

• js-cache-property-access

• 在迴圈中快取物件屬性

• js-cache-function-results

• 在模組層級 Map 中快取函式結果

• js-cache-storage

• 快取 localStorage/sessionStorage 讀取

• js-combine-iterations

• 將多個 filter/map 合併為一個迴圈

• js-length-check-first

• 在昂貴的比較前先檢查陣列長度

• js-early-exit

• 提早從函式返回

• js-hoist-regexp

• 將 RegExp 建立提升到迴圈外

• js-min-max-loop

• 使用迴圈求最小/最大值，而非排序

• js-set-map-lookups

• 使用 Set/Map 進行 O(1) 查找

• js-tosorted-immutable

• 使用 toSorted() 以保持不可變性

8. 進階模式（低）

• advanced-event-handler-refs

• 將事件處理器存在 refs 中

• advanced-use-latest

• 使用 useLatest 以獲得穩定的回呼 refs

使用方式

閱讀個別規則檔案以獲取詳細說明和程式碼範例：

rules/async-parallel.md rules/bundle-barrel-imports.md rules/_sections.md

每個規則檔案包含：

• 為何重要的簡要說明

• 錯誤程式碼範例與說明

• 正確程式碼範例與說明

• 額外的上下文和參考資料

完整編譯文件

完整指南及所有規則展開內容請參閱：AGENTS.md