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
使用方式
閱讀個別規則檔案以獲取詳細說明和程式碼範例：
code
rules/async-parallel.md rules/bundle-barrel-imports.md rules/_sections.md
每個規則檔案包含：
- •為何重要的簡要說明
- •錯誤程式碼範例與說明
- •正確程式碼範例與說明
- •額外的上下文和參考資料
完整編譯文件
完整指南及所有規則展開內容請參閱：AGENTS.md