React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
Vercel React Best Practy.
功能概述
Vercel React Best Practy.是一项面向实际任务的技能，主要用于React and Next.js 应用程序综合性能优化指南,由Vercel维护. 包含跨8类的62条规则,按影响排序。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
使用与执行
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。
结果检查与注意事项
执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
Vercel React 最佳实践
由 Vercel 维护的 React 与 Next.js 应用全面性能优化指南。涵盖 8 个类别共 62 条规则，并按实际影响程度排序，以指导自动化重构与代码生成。
适用场景
在以下情况下参考本指南：
- 编写新的 React 组件或 Next.js 页面
- 实现数据获取（客户端或服务端）
- 审查代码是否存在性能问题
- 重构现有的 React/Next.js 代码
- 优化打包体积或加载时间
按优先级划分的规则类别
| 优先级 | 类别 | 影响程度 | 前缀 |
|---|---|---|---|
| 1 | 消除瀑布式请求（Eliminating Waterfalls） | CRITICAL | async- |
| 2 | 打包体积优化（Bundle Size Optimization） | CRITICAL | bundle- |
| 3 | 服务端性能（Server-Side Performance） | HIGH | server- |
| 4 | 客户端数据获取（Client-Side Data Fetching） | MEDIUM-HIGH | client- |
| 5 | 重渲染优化（Re-render Optimization） | MEDIUM | rerender- |
| 6 | 渲染性能（Rendering Performance） | MEDIUM | rendering- |
| 7 | JavaScript 性能（JavaScript Performance） | LOW-MEDIUM | js- |
| 8 | 高级模式（Advanced Patterns） | LOW | advanced- |
速查表
1. 消除瀑布式请求（CRITICAL）
async-defer-await— 将await移至实际使用该值的分支中async-parallel— 对相互独立的操作使用Promise.all()async-dependencies— 使用better-all处理部分依赖关系async-api-routes— 在 API 路由中尽早启动 Promise，延迟awaitasync-suspense-boundaries— 使用 Suspense 实现内容流式传输
2. 打包体积优化（CRITICAL）
bundle-barrel-imports— 直接导入具体模块，避免通过 barrel 文件导入bundle-dynamic-imports— 对重型组件使用next/dynamicbundle-defer-third-party— 在 hydration 完成后再加载分析工具/日志 SDKbundle-conditional— 仅在功能启用时才加载对应模块bundle-preload— 在悬停（hover）或聚焦（focus）时预加载资源，提升感知速度
3. 服务端性能（HIGH）
server-auth-actions— 像处理 API 路由一样对服务端操作（Server Actions）进行鉴权server-cache-react— 使用React.cache()实现每个请求内的去重缓存server-cache-lru— 使用 LRU 缓存实现跨请求缓存server-dedup-props— 避免在 RSC props 中重复序列化相同数据server-hoist-static-io— 将静态 I/O（如字体、Logo）提升至模块级别server-serialization— 最小化传递给客户端组件的数据量server-parallel-fetching— 重构组件结构，使多个fetch并行执行server-after-nonblocking— 使用after()执行非阻塞操作
4. 客户端数据获取（MEDIUM-HIGH）
client-swr-dedup— 使用 SWR 实现自动请求去重client-event-listeners— 对全局事件监听器进行去重client-passive-event-listeners— 对滚动事件使用 passive 监听器client-localstorage-schema— 对 localStorage 数据进行版本控制并最小化其体积
5. 重渲染优化（MEDIUM）
rerender-defer-reads— 不要订阅仅在回调中使用的状态rerender-memo— 将耗时逻辑提取为 memoized 组件rerender-memo-with-default-value— 将默认的非原始类型 props 提升至组件外部rerender-dependencies— 在useEffect等副作用中使用原始类型作为依赖项rerender-derived-state— 订阅派生布尔值，而非原始值rerender-derived-state-no-effect— 在渲染阶段派生状态，而非在副作用中rerender-functional-setstate— 使用函数式setState保证回调稳定性rerender-lazy-state-init— 对开销较大的初始值，向useState传入初始化函数rerender-simple-expression-in-memo— 对简单原始值避免使用memorerender-move-effect-to-event— 将交互逻辑移至事件处理器中rerender-transitions— 对非紧急更新使用startTransitionrerender-use-ref-transient-values— 对频繁变化的临时值使用refrerender-no-inline-components— 不要在组件内部定义子组件
6. 渲染性能（MEDIUM）
rendering-animate-svg-wrapper— 动画作用于div包裹器，而非直接作用于 SVG 元素rendering-content-visibility— 对长列表使用content-visibilityrendering-hoist-jsx— 将静态 JSX 提取到组件外部rendering-svg-precision— 降低 SVG 坐标精度rendering-hydration-no-flicker— 使用内联脚本注入仅客户端所需的数据rendering-hydration-suppress-warning— 抑制预期存在的服务端/客户端不一致警告rendering-activity— 使用Activity组件控制显示/隐藏逻辑rendering-conditional-render— 条件渲染优先使用三元表达式，而非&&rendering-usetransition-loading— 加载状态优先使用useTransitionrendering-resource-hints— 使用 React DOM 的资源提示（resource hints）实现预加载rendering-script-defer-async— 在目录更多热门AI工具
相关专题
本专题围绕 React 框架在大型前端项目中的性能优化展开，讲解组件生命周期优化、虚拟 DOM 原理、状态管理策略及懒加载技术。通过实战案例，帮助开发者构建性能优良、响应迅速的前端应用。
165
2026.04.13
本专题专注于 React 18 的高级开发技术，详细讲解 useState、useEffect、useReducer、useContext 等 Hooks 的使用技巧，以及 Redux、Zustand 等状态管理工具的集成与优化方法。通过真实案例，帮助前端开发者构建可维护、性能优良的现代 React 应用。
183
2026.02.10
本专题介绍Gradle插件开发的基本流程，涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法，帮助你理解插件如何组织构建逻辑，减少多个项目之间的重复配置。
0
2026.10.22
本专题介绍Gradle Wrapper的基本作用，涵盖文件组成、生成方法、版本配置和任务调用，帮助你理解项目如何使用指定的Gradle版本，减少不同开发环境带来的构建差异。
0
2026.10.22
本专题整理Golangci-lint常用Linters的用途与配置方法，覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查，帮助项目合理选规则。
0
2026.10.22
本专题介绍Gradle Java项目构建方法，涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查，帮助你理解各阶段的任务关系，逐步完成项目构建。
0
2026.10.22
本专题汇总PHP常见时间戳漏洞，包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等，并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案，帮助开发者快速排查和加固时间相关代码。
0
2026.10.22
本专题聚焦Golangci-lint YAML配置文件，讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置，便于团队统一检查标准。
0
2026.10.22
本专题讲解Golangci-lint的安装、初始化、基础命令和首次代码检查，覆盖本地环境、Docker及多平台用法，帮助Go开发者快速上手。
0
2026.10.22
热门下载
相关下载
精品课程
共0课时 | 0人学习
共0课时 | 198人学习
共58课时 | 12.3万人学习
最新文章
