Vercel 放大招：把十年 React 性能优化经验，直接喂给了 AI

作者

你有没有过这样的经历——花了三天优化 React 性能，拆组件、加 memo、调 Suspense，最后发现真正的瓶颈是两个本可以并行的数据库查询被写成了串行 await？

这不是段子，这是 Vercel 工程团队在无数生产项目中反复踩过的坑。

2026 年 1 月，Vercel CEO Guillermo Rauch 宣布了一个让前端圈炸锅的项目——Agent Skills，一套专为 AI 编程助手打造的”技能包管理器”。其中最重磅的技能包 react-best-practices，将 Vercel 十年积累的 React 和 Next.js 性能优化经验，浓缩成 8 大类别、40+ 条规则，让你的 AI 编程助手瞬间拥有资深前端架构师的性能直觉。

GitHub 上线不到两周，star 数突破 17000。

为什么需要这个项目？

Vercel 团队在博客中一针见血地指出了一个行业通病：大多数性能优化是在出问题之后才开始的。 而真正高效的做法，是在写代码的时候就避开性能陷阱。

他们总结了生产环境中最常见的三个性能杀手：

1. 串行异步操作（请求瀑布流）

这是排名第一的性能杀手。每一个串行 await 都会叠加完整的网络延迟。两个不相关的数据库查询被写成先后执行，就白白浪费了几百毫秒。正确做法是用 Promise.all 并行化。

2. 客户端包体积膨胀

随着项目迭代，越来越多的代码被不经意地打进了客户端 bundle。一个本该在服务端运行的大型库、一个被遗忘的 polyfill，都在悄悄拖慢你的首屏加载。

3. 不必要的组件重渲染

状态提升不当、Context 滥用、缺少 memo 策略——这些问题在小项目中不痛不痒，但在复杂应用中会形成指数级的性能衰退。

关键洞察是：如果请求瀑布流浪费了 600ms，再怎么优化 useMemo 也无济于事。 优先级比具体技巧更重要。

40+ 条规则，按影响力排序

react-best-practices 将所有规则按影响力从高到低分为 8 大类别：

优先级类别级别
1消除请求瀑布流CRITICAL
2减少包体积CRITICAL
3服务端性能优化HIGH
4客户端数据获取HIGH
5重渲染优化MEDIUM
6渲染性能MEDIUM
7高级模式LOW
8JavaScript 性能LOW

每条规则都包含：详细解释 + 错误示例 vs 正确示例 + 具体影响度量。这不是空洞的原则宣讲，而是从真实生产环境提炼的实战经验。

比如有一条规则指出：React Server/Client 边界的序列化会将所有 props 转为字符串嵌入 HTML 响应，直接影响页面体积和加载时间——所以只传客户端真正需要的字段。

又比如：一个聊天页面对同一个消息列表扫描了 8 次，合并为单次遍历后性能显著提升。

真正的创新：让 AI 直接”学会”这些规则

这套规则最精妙的设计不是规则本身，而是它的交付方式。

所有独立规则文件会编译成结构化文档，注入到各个 AI 编程助手的配置体系中——Claude Code 对应 CLAUDE.md，Codex 对应 AGENTS.md，Cursor 对应 .cursor/rules。当你的 AI 助手在审查代码或建议优化时，可以直接查询这些规则，无需任何手动 prompt 工程。

换句话说，装上这个技能包后，你的 AI 助手会在你写出串行 await 时主动提醒你用 Promise.all，在你往客户端组件塞入大型库时警告你拆分 bundle。

目前兼容的 AI 编程工具包括：Claude Code、Cursor、Codex、OpenCode 等主流 AI 编程助手。

Agent Skills：AI 编程助手的”npm”

react-best-practices 只是 Agent Skills 生态的冰山一角。Vercel 正在构建的是一个完整的 AI 编程技能包分发系统——你可以把它理解为”AI 编程助手的 npm”。

目前已发布 5 个技能包：

react-best-practices — React/Next.js 性能优化，40+ 规则，8 大类别

web-design-guidelines — UI/UX 审计工具，100+ 条规则，覆盖无障碍访问、语义 HTML、键盘导航、动画、图片优化、国际化等维度。对着你的代码说一句”Review my UI”就能触发全面审计。

react-native-guidelines — React Native 和 Expo 移动端最佳实践，16 条规则，覆盖性能、布局、动画和平台特定模式。

composition-patterns — React 组合模式指南，帮你避免 boolean props 泛滥，通过复合组件、状态提升和内部组合实现可扩展的组件架构。

vercel-deploy-claimable — 一键部署到 Vercel，自动检测 40+ 框架，返回预览 URL 和所有权认领链接。

每个技能包的结构统一为三部分：

  • SKILL.md：自然语言指令，告诉 AI 何时以及如何应用这些规则
  • scripts/：可选的自动化脚本
  • references/：补充参考文档和示例

一行命令，装备你的 AI 助手

安装方式极其简单：

npx add-skill vercel-labs/agent-skills

CLI 会自动检测你本地安装的编程工具（Cursor、Claude Code、Codex、OpenCode），找到对应的配置目录，将技能包注入。安装完成后，技能会根据你的编码场景自动触发——写组件时触发性能规则，做 UI 审查时触发设计规则，完全不需要手动干预。

实战：在 Claude Code 中使用 Agent Skills

说了这么多，到底怎么用？以 Claude Code 为例，从安装到日常使用，手把手走一遍。

安装

打开终端，一行命令搞定：

npx add-skill vercel-labs/agent-skills

CLI 会自动检测你本地的 AI 编程工具，交互式选择要安装的技能包。如果你想精确控制，也可以用更细粒度的命令：

# 查看可用技能包列表
npx skills add vercel-labs/agent-skills --list

# 只安装某个特定技能
npx skills add vercel-labs/agent-skills --skill react-best-practices

# 指定安装到 Claude Code
npx skills add vercel-labs/agent-skills -a claude-code

# 一次性全部安装
npx skills add vercel-labs/agent-skills --all

# 卸载技能
npx skills remove

安装完成后，技能包会落在 ~/.claude/skills/ 目录下。以 react-best-practices 为例，结构如下：

~/.claude/skills/vercel-react-best-practices/
├── SKILL.md          # 技能描述与触发条件
├── AGENTS.md         # 编译后的完整规则文档（Codex 格式，Claude Code 通过 SKILL.md 加载）
└── rules/            # 57 条独立规则文件
    ├── async-parallel.md
    ├── async-defer-await.md
    ├── bundle-barrel-imports.md
    ├── bundle-dynamic-imports.md
    ├── render-memo-components.md
    └── ...

自动触发，无需手动干预

安装之后，你什么都不用做。当你在 Claude Code 中编写或审查 React/Next.js 代码时，AI 会自动加载对应的技能规则。具体触发场景包括：

  • 编写新的 React 组件或 Next.js 页面
  • 实现数据获取逻辑（客户端或服务端）
  • 审查代码的性能问题
  • 重构现有 React/Next.js 代码
  • 优化包体积或加载时间

比如你让 Claude Code 帮你写一个数据获取组件，它会自动参考 async-parallel.md 规则，确保不会写出串行瀑布流。你让它审查一个大型组件，它会对照 bundle-barrel-imports.md 检查是否存在 barrel import 导致的包体积膨胀。

最佳实践：让技能包发挥最大价值

1. 用于 Code Review 而不仅仅是写代码

最有效的用法不是让 AI 从零开始写代码，而是把你已有的代码丢给它审查。试试这样说：

“Review this component for performance issues”
“Check this page for request waterfalls”
“Audit the bundle size impact of this file”

AI 会逐条对照规则给出具体建议，而不是泛泛而谈。

2. 组合使用多个技能包

react-best-practices 管性能，web-design-guidelines 管 UI/UX，composition-patterns 管组件架构。三个一起装，覆盖面最全。一句”Review my UI”就能同时触发设计规则和性能规则的联合审计。

3. 在项目级别配置

除了全局安装，你也可以把技能包放在项目的 .claude/skills/ 目录下，这样团队成员共享同一套规则，保证代码风格和性能标准一致。

4. 关注 CRITICAL 级别的规则

57 条规则不用一次全记住。优先关注 CRITICAL 级别的两类：消除瀑布流和减少包体积。这两类带来的性能提升远超其他所有规则之和。

5. 结合具体场景提问

与其泛泛地说”优化性能”，不如带着具体上下文提问：

“This page loads in 3 seconds, help me find the waterfalls”
“The bundle is 2MB, which imports should I lazy load?”

具体的上下文让 AI 能更精准地匹配规则、给出可操作的建议。

这意味着什么？

Agent Skills 代表了一个重要的范式转移：专家知识的标准化封装与分发。

过去，团队的性能优化经验靠口口相传、代码评审、内部文档。这些知识分散、易失、难以规模化传播。现在，Vercel 证明了一种新路径——将领域专家知识编码为结构化规则，通过 AI 编程助手实现零成本、持续性的知识传递。

对于前端开发者来说，这不只是一个工具，更是一个信号：未来优秀的工程团队会把最佳实践打包成 Agent Skills，而不是写在 wiki 里等着被遗忘。

项目地址：github.com/vercel-labs/agent-skills

博客原文：vercel.com/blog/introducing-react-best-practices

发表评论