Vercel React Best Practices · React 与 Next.js 性能优化

@public/vercel-react-best-practices

查看空间 →

Vercel Engineering 面向 React 和 Next.js 的性能审查指南。Agent 可按影响优先排查请求串行等待和过大的客户端包，再检查服务端取数、重复渲染等问题。上游 1.0.0 收录 8 类共 70 条规则，采用 MIT 许可证。

介绍图片 1介绍图片 2
  • next.js
  • react
  • 代码审查
  • 前端性能
  • 异步请求

能力与使用条件

适用场景

  • 审查商品详情页的串行取数
  • 分析首屏加载的重型客户端组件
  • 重构频繁更新的 React 组件

输入要求

  • 页面或组件源码、请求之间的数据依赖、需要保留的交互行为
  • 可选：网络时间线、构建产物体积或 React Profiler 记录

输出结果

  • 按影响排序的审查意见，标注相关规则和代码位置
  • 针对具体代码的重构建议，例如并行独立请求或延迟加载重型组件

前置条件

  • 项目使用 React 或 Next.js；向 Agent 提供相关源码
  • 使用包含规则说明的完整 Skill 包

不适用场景与限制

  • 有前置依赖的请求仍需等待；并行前应核对失败处理
  • 效果图为概念示意。性能收益需在目标项目中测量

说明性示例

  • 请检查商品和评论的请求是否互相依赖。如果都只需要路由商品 ID，请给出并行写法并保留错误处理。
  • 检查首屏是否加载了仅在点击时使用的编辑器，说明如何验证拆包效果。

资料依据

  • https://github.com/vercel-labs/agent-skills/blob/1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62/skills/react-best-practices/SKILL.md
  • https://github.com/vercel-labs/agent-skills/blob/1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62/skills/react-best-practices/rules/async-parallel.md

外部资源

内容由外部网站提供，平台不保证第三方文件的完整性、可用性或安全性。

访问官网 ↗登录后前往外部下载

外部文件的访问权限由第三方管理，本站无法限制其地址的访问。