用途:面向 React 与 Next.js 应用的性能优化,规则来自 Vercel Engineering,共 57 条,按影响优先级分为 8 个类别,核心理念是先消除瀑布请求,再优化包体积,最后做微优化。
主要能力:按影响分级组织内容。CRITICAL 包括消除瀑布请求(5 条)与包体积优化(5 条);HIGH 为服务端性能(7 条);MEDIUM-HIGH 为客户端数据获取(4 条);MEDIUM 为重渲染优化(12 条)与渲染性能(9 条);LOW-MEDIUM 为 JavaScript 性能(12 条);VARIABLE 为高级模式(3 条)。提供快速决策树,按症状定位章节,例如页面加载慢读第 1、2 节,包体积大于 200KB 读第 2 节,SSR 慢读第 3 节,重渲染过多读第 5 节。
使用方式:技能要求选择性阅读,只加载与当前任务相关的章节,避免一次性读取全部内容。做性能审查时先看 CRITICAL 章节,再依次看 HIGH、MEDIUM。资料给出性能审查清单,涵盖关键项(无顺序数据获取、主包小于 200KB、应用代码无 barrel 导入、大组件使用动态导入、尽可能并行获取数据)、高优先级项(适当使用服务端组件、API 路由无 N+1 查询、使用 Suspense 边界、尽可能静态生成)、中优先级项(昂贵计算记忆化、超过 100 项列表虚拟化、使用 next/image 优化图片、避免不必要重渲染)与低优先级项。
适用场景:新功能开发、性能审查、慢性能调试,以及需要按优先级系统化优化 Next.js/React 项目的场景。
限制:资料未提供安装命令、具体代码示例、收费与平台信息;规则的具体实现细节需查阅对应章节文件。相关技能包括 API 设计、数据库优化、测试策略、前端设计、TypeScript 与部署运维。