SuperAPI AI 工具集

vercel-react-best-practices

前端与建站

查看项目

更新于 10-16 08:11

技能介绍

用途:面向 React 与 Next.js 应用的性能优化指南,供在编写新组件或页面、实现数据获取、审查性能问题、重构现有代码、优化包体积与加载时间时参考,也可用于指导自动化重构与代码生成。

主要能力:按影响优先级划分 8 类共 70 条规则。消减请求瀑布(CRITICAL,async-):如 async-cheap-condition-before-await、async-defer-await、async-parallel、async-dependencies、async-api-routes、async-suspense-boundaries。包体积优化(CRITICAL,bundle-):如 bundle-barrel-imports、bundle-dynamic-imports、bundle-defer-third-party、bundle-preload 等。服务端性能(HIGH,server-):服务端操作鉴权、React.cache() 去重、LRU 跨请求缓存、RSC props 序列化控制、并行抓取、after() 非阻塞操作等。客户端数据获取(MEDIUM-HIGH,client-):SWR 去重、事件监听器去重、passive 监听、localStorage 模式化。重渲染优化(MEDIUM,rerender-):memo、派生状态、函数式 setState、useDeferredValue、避免内联组件等。渲染性能(MEDIUM,rendering-):content-visibility、静态 JSX 提升、水合、Suspense/过渡加载等。JavaScript 性能(LOW-MEDIUM,js-):Map/Set 查找、属性缓存、合并迭代、提前返回等。高级模式(LOW,advanced-):事件处理器 ref、初始化一次、useLatest 等。

使用方式:查阅各规则文件获取详细说明与代码示例,例如 rules/async-parallel.md、rules/bundle-barrel-imports.md;每个规则文件含原因说明、错误示例与说明、正确示例与说明、补充背景与引用。完整汇总文档见 AGENTS.md。

适用场景:React/Next.js 项目的新代码编写、性能审查、重构、包体积与加载优化。

限制:资料未提供具体安装命令、收费或价格信息,亦未说明支持的版本范围;实际效果需结合项目情况判断。