SuperAPI AI 工具集

vercel-react-best-practices

前端与建站

查看项目

更新于 10-16 01:11

技能介绍

用途:这是 Vercel 维护的 React 与 Next.js 性能优化指南,用于在编写、审查或重构 React/Next.js 代码时提供规则参考,指导自动化重构与代码生成。

主要能力:包含 8 个类别、共 70 条规则,按影响优先级排列。类别与优先级为:消除瀑布请求(CRITICAL,前缀 async-)、包体积优化(CRITICAL,bundle-)、服务端性能(HIGH,server-)、客户端数据获取(MEDIUM-HIGH,client-)、重渲染优化(MEDIUM,rerender-)、渲染性能(MEDIUM,rendering-)、JavaScript 性能(LOW-MEDIUM,js-)、高级模式(LOW,advanced-)。示例规则包括 async-parallel(独立操作使用 Promise.all())、bundle-barrel-imports(直接导入,避免 barrel 文件)、server-cache-react(用 React.cache() 做每请求去重)、client-swr-dedup(用 SWR 自动去重请求)、rerender-memo、rendering-content-visibility、js-set-map-lookups、advanced-use-latest 等。

使用方式:在编写新组件或页面、实现数据获取、审查性能问题、重构代码、优化包体积或加载时间时参考这些规则。可阅读单条规则文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md),每个规则文件包含原因说明、错误代码示例、正确代码示例及补充参考。完整指南见 AGENTS.md。

适用场景:React 与 Next.js 应用的性能优化、代码审查与重构。

限制:资料未提供安装命令、收费方式、支持平台及具体效果数据。