🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx @anthropic-ai/skills install supercent-io/skills-template/vercel-react-best-practices

💡 提示：需要 Node.js 和 NPM

Vercel React 最佳实践

由 Vercel 维护的 React 和 Next.js 应用程序综合性能优化指南。包含 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 – 在应用程序编程接口路由中尽早启动 Promise，延迟 await
  • async-suspense-boundaries – 使用 Suspense 流式传输内容

2. 包大小优化（关键）

  • bundle-barrel-imports – 直接导入，避免使用桶文件
  • bundle-dynamic-imports – 对重型组件使用 next/dynamic
  • bundle-defer-third-party – 在水合后加载分析/日志
  • 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 – 在效果中使用原始依赖项
  • 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 – 通过类或 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 – 使用循环而非 sort 获取最小值/最大值
  • js-set-map-lookups – 使用 Set/Map 进行 O(1) 查找
  • js-tosorted-immutable – 使用 toSorted() 保持不可变性

8. 高级模式（低）

  • advanced-event-handler-refs – 将事件处理程序存储在 refs 中
  • advanced-use-latest – 为稳定回调引用使用 useLatest

如何使用

有关详细说明和代码示例，请阅读完整的编译文档：AGENTS.md

每条规则包含：

  • 为何重要的简要说明
  • 带有解释的错误代码示例
  • 带有解释的正确代码示例
  • 附加上下文和参考

关键示例

对独立操作使用 Promise.all（关键）

// ❌ 顺序执行：3 次往返
const user = await fetchUser()
const posts = await fetchPosts()
const comments = await fetchComments()

// ✅ 并行执行：1 次往返
const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
])

避免桶文件导入（关键）

// ❌ 导入整个库（200-800毫秒导入成本）
import { Check, X, Menu } from 'lucide-react'

// ✅ 只导入你需要的
import Check from 'lucide-react/dist/esm/icons/check'
import X from 'lucide-react/dist/esm/icons/x'

为重型组件使用动态导入（关键）

// ❌ Monaco 与主包捆绑，约 300KB
import { MonacoEditor } from './monaco-editor'

// ✅ Monaco 按需加载
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
  () => import('./monaco-editor').then(m => m.MonacoEditor),
  { ssr: false }
)

使用函数式 setState（中）

// ❌ 需要将状态作为依赖项，存在陈旧闭包风险
const addItems = useCallback((newItems) => {
  setItems([...items, ...newItems])
}, [items])

// ✅ 回调稳定，无陈旧闭包
const addItems = useCallback((newItems) => {
  setItems(curr => [...curr, ...newItems])
}, [])

约束条件

必需规则（必须遵守）

  1. 消除瀑布请求：使用 Promise.all 和 Suspense
  2. 优化包大小：不使用桶文件导入，使用动态导入
  3. RSC 边界：仅序列化必要的数据

禁止模式（绝不能出现）

  1. 顺序等待：不要顺序执行独立的获取操作
  2. 数组突变：使用 toSorted() 而非 sort()
  3. React.cache 中的内联对象：会导致缓存未命中

参考资料

元数据

版本

  • 当前版本： 1.0.0
  • 最后更新： 2026-01-22
  • 兼容平台： Claude, ChatGPT, Gemini
  • 原始来源： vercel/agent-skills

相关技能

标签

#React #Next.js #performance #optimization #vercel #waterfalls #bundle-size #RSC #frontend

📄 原始文档

完整文档（英文）：

https://skills.sh/supercent-io/skills-template/vercel-react-best-practices

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。