SuperAPI AI 工具集

vercel-react-best-practices

前端与建站

查看项目

更新于 10-16 05:00

技能介绍

用途:该技能提供一套 React 与 Next.js 应用的性能优化规则,适用于编写新组件或页面、实现数据获取、审查性能问题、重构现有代码以及优化打包体积与加载时间。

主要能力:共 57 条规则,按优先级分为 8 类。1) 消除瀑布流(CRITICAL,前缀 async-),如 async-parallel 使用 Promise.all()、async-defer-await 将 await 移入实际使用的分支、async-suspense-boundaries 用 Suspense 流式输出。2) 打包体积优化(CRITICAL,bundle-),如避免 barrel 文件直接导入、用 next/dynamic 加载重型组件、延迟第三方脚本。3) 服务端性能(HIGH,server-),如用 React.cache() 做请求内去重、LRU 跨请求缓存、减少传给客户端组件的数据。4) 客户端数据获取(MEDIUM-HIGH,client-),如用 SWR 自动去重、去重全局事件监听。5) 重渲染优化(MEDIUM,rerender-),如 memo 化昂贵计算、使用函数式 setState、用 startTransition 处理非紧急更新。6) 渲染性能(MEDIUM,rendering-),如长列表用 content-visibility、静态 JSX 提取到组件外。7) JavaScript 性能(LOW-MEDIUM,js-),如用 Map/Set 做 O(1) 查找、循环外提升正则。8) 高级模式(LOW,advanced-),如用 ref 存储事件处理器。

使用方式:按需阅读各规则文件(如 rules/async-parallel.md、rules/bundle-barrel-imports.md),每个文件含原因说明、错误示例、正确示例与参考。完整展开版见 AGENTS.md。

适用场景:React/Next.js 项目的性能审查、重构与代码生成。

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