SuperAPI AI 工具集

vercel-react-best-practices

前端与建站

查看项目

更新于 10-16 06:44

技能介绍

用途:这是 Vercel Engineering 维护的 React 与 Next.js 性能优化指南,在编写、审阅或重构 React/Next.js 代码时使用,以确保采用最佳性能模式。触发场景包括 React 组件、Next.js 页面、数据获取、打包优化或性能改进相关任务。

主要能力:包含 8 大类共 57 条规则,按影响程度排序,并配有前缀标识。优先级从高到低为:消除瀑布流(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 建议将昂贵计算提取到 memo 化组件;rendering-content-visibility 建议对长列表使用 content-visibility;js-set-map-lookups 建议用 Set/Map 实现 O(1) 查找;advanced-use-latest 提供 useLatest 以获得稳定回调引用。

使用方式:查阅各规则文件获取详细说明与代码示例,例如 rules/async-parallel.md、rules/bundle-barrel-imports.md。每个规则文件包含:为何重要的简要说明、错误代码示例及解释、正确代码示例及解释、额外上下文与参考。完整指南见 AGENTS.md。

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

限制:资料未提供安装命令、收费方式、平台要求或效果保证等信息。