React性能优化

要解决的问题

React/Next.js 项目的性能瓶颈往往藏在细节里：连续 await 触发瀑布请求、从图标库整包导入导致 bundle 膨胀、useMemo 滥用引发重渲染。这些问题单独看可能不明显，但在用户增长或页面复杂度提升后，会直接影响 Core Web Vitals 和转化率。普通性能优化指南通常只讲概念，缺乏可落地的 before/after 对比，工程师拿到手还是需要自己判断优先级和实现方式。

核心能力与工作流

该技能以 70 条按影响排序的规则为核心，覆盖瀑布请求、包体积、服务端/客户端渲染等 8 个优先级类别。工作流程分四步：

1. 判定问题类别：根据优先级前缀（如 async- 对应瀑布请求、bundle- 对应包体积）定位主要瓶颈；
2. 生成可执行建议：每条规则都包含「错误写法 + 正确写法 + 原因」，例如将串行 fetchUser/fetchPosts 改为 Promise.all 并行请求；
3. 排序输出：优先处理严重档位问题，输出结构化 PerfReview 工件，包含文件路径、优先级、前后对比代码；
4. 版本适配校验：根据项目框架版本（如 Next 15 才推荐 use cache）过滤不适用建议。

适用边界与注意点

• 适用场景：编写新组件/页面时预检查、PR 评审、重构优化（重点处理瀑布、bundle、重渲染）；
• 不适用场景：纯 CSS/设计稿评审建议搭配 web-design-guidelines；组件架构问题交由 composition-patterns；Vercel 线上成本审计使用 vercel-optimize。