SuperAPI AI 工具集

vercel-react-best-practices

前端与建站

查看项目

更新于 10-16 05:53

技能介绍

用途:这是 Vercel 维护的 React 与 Next.js 应用性能优化指南,包含 45 条规则、分为 8 个类别并按影响程度排优先级,主要用于在编写、审查或重构 React/Next.js 代码时提供参考,可辅助自动化重构与代码生成。

适用时机:编写新的 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() 处理独立操作)、async-suspense-boundaries(用 Suspense 流式输出内容)、bundle-barrel-imports(直接导入,避免 barrel 文件)、bundle-dynamic-imports(对重型组件使用 next/dynamic)、server-cache-react(用 React.cache() 做单请求去重)、server-cache-lru(用 LRU 缓存做跨请求缓存)、client-swr-dedup(用 SWR 自动去重请求)、rerender-memo(把昂贵计算抽到已记忆化组件)、rendering-content-visibility(对长列表使用 content-visibility)、js-set-map-lookups(用 Set/Map 实现 O(1) 查找)等。

使用方式:可阅读各规则文件获取详细说明与代码示例,例如 rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md;每个规则文件包含规则重要性简述、带解释的错误代码示例、带解释的正确代码示例及补充背景与参考。完整指南见 AGENTS.md。

限制:现有资料仅列出规则分类与条目名称,未提供具体安装命令、收费或价格信息,这些内容暂未提供。