Vercel（Next.js 背后的云平台）发布开源存储库react-best-practices，其中包含 40 多条针对 React 和 Next.js 应用程序的性能优化规则。该框架封装了 Vercel 生产代码库中超过十年的工程知识，虽说是专门为 AI 编码代理和大型语言模型（LLM）消费而设计的，不过其团队指出，它对人类开发者而言同样有价值。
该存储库将其规则组织成八个类别，每个类别根据影响级别从 CRITICAL 到 LOW 做了优先级排序。两个最高优先级的类别侧重于消除异步瀑布流及减少资源包大小，Vercel 工程团队认为这是生产应用程序中最普遍的性能问题来源。其他类别涵盖了服务器端性能、客户端数据获取、重新渲染优化、渲染性能、高级模式和 JavaScript 微优化。
每条规则都包括代码示例，展示了错误模式和正确模式。
各个规则文件会整合成一个 AGENTS.md 文档，供 AI 代理在审查或重构代码时查询。该框架是作为 Vercel 更广泛的Agent Skills生态系统（一个为代理提供新能力的开放格式）的一部分分发的。开发者可以使用一行命令（npx skills add vercel-labs/agent-skills）将技能安装到诸如 Claude Code、Cursor、Codex 和 OpenCode 等工具中。
对于这次发布，开发者社区反应不一。在 reddit 子论坛r/vibecoding上，有一位评论者认为它在氛围编码中很有用：
看起来确实很有用。对于像 v0 和 Lovable 这样的编码代理，我发现氛围编码代理的提示/上下文令牌多到让人惊讶。上下文工程绝对是氛围编码成功的关键因素。
在其他地方，有些用户表达了安全方面的担忧：
想象一下，当技能描述被输入 AI 代理时，供应链遭到攻击的情景。真是个有趣的时代。
在reddit上另一个帖子中，有一位评论者暗示他们可能在解决错误的问题：
这个方向似乎是对的，但我怀疑我们在解决错误的问题。编纂好的最佳实践很棒，但我看到，大多数 AI 编码失败并不是因为缺少 React 优化规则，而是因为代理不理解实际的业务逻辑或是对用户需求做出了错误的假设。
该框架不同于 eslint-plugin-react、eslint-plugin-react-hooks 等现有的工具，后者在代码检查器层面强制执行语法规则和钩子使用模式。Vercel 提供的是专注于更高层面的架构决策，如请求瀑布流和包组成，这些通常不是 linting 工具所能涵盖的内容。最近发布的React Compiler v1.0是对这个框架的补充，它能自动处理多条规则中需要手动处理的记忆优化。
截至撰稿时，该技能包的 GitHub 存储库已经拥有超过 21k 星标和超过 150k 的每周安装量。
对于希望在现有项目中采用该框架的团队，该存储库的结构设计使得每条规则都可以独立审查和应用。各规则文件位于rules目录中，其中不仅包含针对每种模式的重要性说明，还附有代码改造前后的示例，使渐进式采用变得简单明了。
Vercel 的 react-best-practices 项目遵循 MIT 许可。GitHub 上提供了存储库和完整的 AGENTS.md 文档。
声明：本文为 InfoQ 翻译，未经许可禁止转载。
原文链接：https://www.infoq.com/news/2026/02/vercel-react-best-practices/
