react-performance-guidelines

# React 最佳实践 - 完整文档 **版本 0.1.0** Vercel Engineering 2026 年 1 月 > **注意：** > 本文档主要供智能体和 LLM 在维护、生成或重构 Vercel 的 React 和 Next.js 代码库时参考。 --- ## 摘要 针对 React 和 Next.js 应用程序的综合性能优化指南，专为智能体和 LLM 设计。包含 8 个类别的 40 多条规则，按影响程度从关键（消除瀑布流、减小包体积）到增量（高级模式）进行优先级排序。每条规则都包含详细说明、比较不正确与正确实现的真实世界示例，以及指导自动化重构和代码生成的具体影响指标。 --- ## 目录 1. [消除瀑布流](#1-eliminating-waterfalls) — **关键** - 1.1 [延迟 await 直到需要时](#11) - 1.2 [基于依赖的并行化](#12) - 1.3 [防止 API 路由中的瀑布流链](#13) - 1.4 [使用 Promise.all() 处理独立操作](#14) - 1.5 [策略性 Suspense 边界](#15) 2. [包体积优化](#2-bundle-size-optimization) — **关键** - 2.1 [避免桶文件导入](#21) - 2.2 [条件模块加载](#22) - 2.3 [延迟非关键第三方库](#23) - 2.4 [大型组件的动态导入](#24) - 2.5 [基于用户意图的预加载](#25) 3. [服务端性能](#3-server-side-performance) — **高** - 3.1 [跨请求 LRU 缓存](#31) - 3.2 [最小化 RSC 边界处的序列化](#32) - 3.3 [通过组件组合进行并行数据获取](#33) - 3.4 [使用 React.cache() 进行请求内去重](#34) 4. [客户端数据获取](#4-client-side-data-fetching) — **中高** - 4.1 [全局事件监听器去重](#41) - 4.2 [使用 SWR 进行自动去重](#42) 5. [重渲染优化](#5-re-render-optimization) — **中** - 5.1 [将状态读取延迟到使用点](#51) - 5.2 [提取到记忆化组件](#52) - 5.3 [缩小 Effect 依赖项](#53) - 5.4 [订阅派生状态](#54) - 5.5 [使用懒状态初始化](#55) - 5.6 [对非紧急更新使用 Transitions](#56) 6. [渲染性能](#6-rendering-performance) — **中** - 6.1 [动画化 SVG 包装器而非 SVG 元素](#61) - 6.2 [长列表的 CSS content-visibility](#62) - 6.3 [提升静态 JSX 元素](#63) - 6.4 [优化 SVG 精度](#64) - 6.5 [防止 Hydra