vercel-react-best-practices - Vercel 官方 React 性能优化 Skill

Vercel 工程团队官方出品的 React 和 Next.js 性能优化指南，专为 AI Agent 和 LLM 设计的知识库 Skill，包含 45 条规则。

项目简介

这是 Vercel 工程团队开发的 Agent Skills 系列中的 React 最佳实践 Skill。它是一个专为 AI 代理和 LLM 设计的结构化知识库，包含 45 条性能优化规则，按影响力优先级分为 8 个类别。

按优先级分类的 8 大规则类别

优先级	类别	影响力	规则数
1	消除瀑布流	关键	5
2	包大小优化	关键	5
3	服务端性能	高	5
4	客户端数据获取	中高	2
5	重渲染优化	中	7
6	渲染性能	中	7
7	JavaScript 性能	低中	12
8	高级模式	低	2

① 消除瀑布流 - 关键

typescript

// ❌ 错误: 顺序执行，3次网络往返
const user = await fetchUser()
const posts = await fetchPosts()
const comments = await fetchComments()

// ✅ 正确: 并行执行，1次网络往返
const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
])

② 包大小优化 - 关键

tsx

// ❌ 错误: 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 }
)

③ 服务端性能 - 高

tsx

// ✅ 正确: 两个组件同时获取
async function Header() {
  const data = await fetchHeader()
  return <div>{data}</div>
}

async function Sidebar() {
  const items = await fetchSidebarItems()
  return <nav>{items.map(renderItem)}</nav>
}

export default function Page() {
  return (
    <div>
      <Header />
      <Sidebar />
    </div>
  )
}

⑤ 重渲染优化 - 中

tsx

// ✅ 正确: 加载时跳过计算
const UserAvatar = memo(function UserAvatar({ user }) {
  const id = useMemo(() => computeAvatarId(user), [user])
  return <Avatar id={id} />
})

⑦ JavaScript 性能 - 低中

typescript

// ❌ 错误: O(n) 每次检查
const allowedIds = ['a', 'b', 'c']
items.filter(item => allowedIds.includes(item.id))

// ✅ 正确: O(1) 每次检查
const allowedIds = new Set(['a', 'b', 'c'])
items.filter(item => allowedIds.has(item.id))

安装与使用

bash

git clone https://github.com/vercel-labs/agent-skills.git
cd agent-skills
pnpm install
pnpm build

在 AI Agent 工作流中使用

触发短语:

"优化 React 代码性能"
"审查我的 Next.js 页面"
"重构这个组件以提高性能"
"检查代码中的瀑布流问题"

适用场景

AI 编程助手: 集成到 Claude Code、GitHub Copilot 等工具
代码审查: 自动检查 React/Next.js 代码性能问题
重构工具: 智能重构现有代码以提升性能
学习资源: 开发者学习 React/Next.js 最佳实践
团队规范: 作为团队的 React/Next.js 代码规范参考

字节笔记本