SuperAPI AI 工具集

vercel-agent-vercel-react-best-practices

前端与建站

查看项目

更新于 10-16 05:42

技能介绍

用途:这是一份面向 React 与 Next.js 应用的性能优化指南,由 Vercel 维护,包含 8 个类别共 70 条规则,按影响程度分级,用于指导自动重构与代码生成。

适用时机:编写新的 React 组件或 Next.js 页面、实现客户端或服务端数据获取、审查代码性能问题、重构现有 React/Next.js 代码、优化打包体积或加载时间时参考。

规则类别按优先级排列:1. 消除瀑布流(CRITICAL,前缀 async-);2. 打包体积优化(CRITICAL,前缀 bundle-);3. 服务端性能(HIGH,前缀 server-);4. 客户端数据获取(MEDIUM-HIGH,前缀 client-);5. 重渲染优化(MEDIUM,前缀 rerender-);6. 渲染性能(MEDIUM,前缀 rendering-);7. JavaScript 性能(LOW-MEDIUM,前缀 js-);8. 高级模式(LOW,前缀 advanced-)。

部分具体规则示例:async-parallel 用 Promise.all() 处理独立操作;bundle-barrel-imports 直接导入、避免 barrel 文件;server-cache-react 用 React.cache() 做每请求去重;client-swr-dedup 用 SWR 自动去重请求;rerender-memo 将昂贵计算提取到记忆化组件;rendering-content-visibility 对长列表用 content-visibility;js-set-map-lookups 用 Set/Map 实现 O(1) 查找;advanced-use-latest 用 useLatest 保持稳定回调引用。

使用方式:阅读各条规则文件(如 rules/async-parallel.md)获取详细解释与代码示例,每个规则文件包含重要性说明、错误代码示例及解释、正确代码示例及解释、附加背景与参考。完整含全部规则的指南见 AGENTS.md。

限制:资料未提供该技能的安装命令、定价、平台支持范围或实际使用效果数据。