Vercel,作为Next.js背后的云平台,刚刚发布了react-best-practices这个开源仓库。该仓库包含了40多条针对React和Next.js应用程序的性能优化建议。这些优化规则凝聚了Vercel在十多年开发实践中积累的经验,其设计初衷是便于AI编码助手和大型语言模型使用,但开发团队也指出,这些规则对人类开发者同样具有很高的参考价值。

这个仓库将各种优化规则分成了八个类别,每个类别都根据影响程度的不同被划分为“CRITICAL”到“LOW”五个等级。其中优先级最高的两个类别分别是消除异步处理带来的性能瓶颈以及减少代码包的大小——Vercel的工程团队认为,这两点是导致生产环境中的应用程序出现性能问题的最常见原因。其他类别还包括服务器端性能优化、客户端数据获取机制、重新渲染过程中的性能提升方法、高级开发模式,以及JavaScript代码的微优化技巧。

每条优化规则都附有示例代码,用于说明错误的实现方式及正确的解决方案。

所有这些规则文件被整合成了一份名为AGENTS.md的文档,AI编码助手在审查或重构代码时可以方便地查询这份文档。该框架作为Vercel旗下的Agent Skills生态系统的一部分进行分发,这种开放格式使得开发者能够轻松地为各种编码助手添加新的功能。开发人员只需执行一条命令:npx skills add vercel-labs/agent-skills),就能将这套优化规则安装到Claude Code、Cursor、Codex或OpenCode等工具中。

这一发布的成果在开发者社区中引发了不同的反应。在r/vibecoding这个子论坛上,有评论者认为这些优化规则对提高编码效率非常有帮助:

这确实看起来很有用。让我惊讶的是,像v0和Lovable这样的AI编码助手所需的提示信息量竟然这么大……上下文信息的处理绝对是决定编码效果的关键因素。

而在其他地方,一些用户则对其中可能涉及的安全问题表示担忧:

想象一下,如果有人针对被AI编码助手使用的“技能描述”内容发起攻击,那后果会非常严重……真是令人担忧的时代啊。

在另一篇Reddit帖子中,有评论者认为他们可能正在解决错误的问题:

这个方向看起来是正确的,但我怀疑我们是否真的在解决正确的问题。编写的最佳实践固然重要,但我在现实中看到的大多数AI编码失败案例,并不是因为缺少这些优化规则,而是因为编码助手没有理解实际的业务逻辑,或者对用户的真实需求做出了错误的判断。

该框架与现有的工具(如eslint-plugin-reacteslint-plugin-react-hooks)有所不同——后者主要在代码检查阶段强制执行语法规则及钩子使用规范。而Vercel提供的这套框架则侧重于更高层次的架构决策,例如请求处理流程的设计以及代码包的组合方式,这些内容通常并不属于代码检查工具的覆盖范围。最近发布的React Compiler v1.0也为该框架提供了补充,它能够自动处理一些规则中要求手动进行的记忆化优化操作。

在本文撰写时,该GitHub仓库已经获得了超过21,000个星标,并且每周有超过150,000次下载量。对于那些希望在现有项目中采用这套框架的团队来说,该仓库的结构设计使得每条规则都可以被独立地审查和应用。具体的规则文件位于rules目录中,其中包含了每条规则的重要性说明,以及相应的代码示例,因此团队可以逐步、分阶段地采用这套框架。

Vercel的react-best-practices框架是基于MIT许可证开发的开源项目。该仓库以及完整的AGENTS.md文档都可以在GitHub上找到。

Comments are closed.