SuperAPI AI 工具集

react-best-practices

前端与建站

查看项目

更新于 10-15 19:54

技能介绍

用途:该技能提供 Vercel 维护的 React 与 Next.js 性能优化指南,包含 45 条规则,分为 8 个类别并按影响程度排序,用于指导自动化重构与代码生成。适用于编写新的 React 组件或 Next.js 页面、实现客户端或服务端数据获取、审查性能问题、重构现有代码、优化打包体积或加载时间。

主要能力(按优先级):1. 消除瀑布流(CRITICAL,async- 前缀),如 async-defer-await、async-parallel、async-dependencies、async-api-routes、async-suspense-boundaries;2. 打包体积优化(CRITICAL,bundle- 前缀),如避免 barrel 导入、动态导入、延迟第三方脚本、条件加载、预加载;3. 服务端性能(HIGH,server- 前缀),如 React.cache()、LRU 缓存、最小化序列化数据、并行获取、after() 非阻塞操作;4. 客户端数据获取(MEDIUM-HIGH,client- 前缀),如 SWR 去重、事件监听器去重;5. 重渲染优化(MEDIUM,rerender- 前缀);6. 渲染性能(MEDIUM,rendering- 前缀);7. JavaScript 性能(LOW-MEDIUM,js- 前缀);8. 高级模式(LOW,advanced- 前缀)。

使用方式:在编写、审查或重构 React/Next.js 代码时参考这些规则;详细解释与代码示例见完整文档 AGENTS.md,每条规则包含原因说明、错误示例、正确示例及补充参考。

约束:必须消除瀑布流(使用 Promise.all、Suspense)、优化打包(禁止 barrel 导入、使用动态导入)、仅序列化所需数据;禁止顺序 await 独立请求、使用 sort() 修改数组(应使用 toSorted())、在 React.cache 中使用内联对象。

限制:资料未提供安装命令、收费方式、价格或具体平台集成步骤;版本 1.0.0,最后更新 2026-01-22,来源 vercel/agent-skills。