核心用法
react-performance 是一款专注于 React 与 Next.js 性能优化的纯文档型技能，提供系统化的 7 大优化类别指南。核心用法围绕识别性能瓶颈场景并应用对应模式：
1. 异步优化（CRITICAL）：消除请求瀑布流，使用 Promise.all() 并行化独立操作，将 await 延迟到真正需要数据的分支，通过 Suspense 边界实现流式渲染
2. 包体积优化（CRITICAL）：避免 barrel file 导入（可节省 200-800ms），对重型组件使用 dynamic() 动态导入，延迟加载非关键第三方库
3. 服务端组件（HIGH）：最小化 RSC 序列化边界的数据传递，通过组件组合实现并行数据获取，使用 React.cache() 实现请求级去重，after() 处理非阻塞操作
4. 重渲染优化（MEDIUM）：渲染期间派生状态替代 useEffect，函数式 setState 保持回调稳定，useTransition 标记非紧急更新
5. 渲染性能（MEDIUM）：CSS content-visibility 优化长列表（1000 项场景 10 倍提速），静态 JSX 提升到组件外部
6. 客户端数据（MEDIUM）：SWR 实现请求去重与缓存
7. JS 性能（LOW-MEDIUM）：Set/Map O(1) 查找替代数组 includes，合并数组遍历减少循环次数
技能还提供快速决策指南：页面加载慢先看包体积和异步瀑布，交互卡顿优先检查重渲染和 JS 性能。
显著优点
权威性与实战性兼备：基于 React 核心团队推荐模式（如 use() Hook、Server Components 架构）和 Next.js 最新特性（experimental.optimizePackageImports、after() API），非个人经验总结。
结构化优先级体系：7 大类别按 CRITICAL/HIGH/MEDIUM/LOW 标注影响等级，避免开发者在低收益优化上浪费时间。例如明确指出"顺序 await 是 React 应用中最大的性能错误"。
量化收益可预期：多处给出具体数字预期——barrel file 优化节省 200-800ms、content-visibility 让 1000 项列表初始渲染快 10 倍、并行请求从 3 次往返降为 1 次。
覆盖现代 React 全栈：同时涵盖客户端优化（重渲染、useMemo、SWR）和服务端架构（RSC 序列化边界、并行数据获取、React.cache），适配 Next.js App Router 时代。
潜在缺点与局限性
纯文档无自动化：仅为代码示例和模式说明，无 ESLint 规则、无 CLI 工具、无性能检测脚本，开发者需手动识别问题并应用模式。
示例代码的隐形成本：部分高级模式（如 React.cache() 的 Object.is 比较限制、use() 的 Promise 共享机制）若理解不深易导致隐蔽 bug。after() 示例中的 User-Agent 日志记录涉及隐私合规陷阱，需额外注意。
框架版本绑定较深：大量特性依赖 Next.js 13.5+（optimizePackageImports）和 React 18+（Server Components、Transitions），旧项目迁移成本未讨论。
无性能基准对比：虽然声称"10 倍更快"，但未提供可复现的 benchmark 或 profiling 方法论，开发者难以验证自身应用的实际收益。
适合的目标群体
- React/Next.js 中高级开发者：已熟悉 Hooks 和组件模式，需系统性提升性能优化方法论
- 全栈工程师优化 SSR/TTFB：负责服务端渲染架构，需掌握 RSC 边界设计和并行数据获取策略
- 技术负责人制定团队规范：可将 7 大类别转化为代码审查清单，建立团队性能标准
- 从 Vite/Webpack 迁移至 Next.js 的开发者：需理解 App Router 新范式下的性能陷阱
不适合：React 初学者（可能混淆"模式应用"与"基础语法"）、纯后端开发者（缺乏前端性能语境）、需要自动化性能监控工具的团队。
使用风险
隐私合规风险（已披露）：after() 示例中的 User-Agent 日志记录涉及数据收集，虽已在文档中标注风险并提供缓解建议，但直接复制到生产环境可能违反 GDPR/CCPA。建议添加明确 consent 检查。
示例代码误用风险：部分优化具有前提条件——如 dynamic(ssr: false) 会导致内容无法被搜索引擎索引，React.cache() 要求原始类型参数。盲目复制可能造成 SEO 降级或缓存失效。
React Compiler 依赖风险：文档多处提及"React Compiler 将使手动 memo 不必要"，但该编译器尚未稳定，过度依赖此预期可能导致当前代码过度优化或未来重构成本。
性能回归风险：content-visibility 等 CSS 优化在部分浏览器存在兼容性问题，动态导入拆分过细可能增加网络往返次数，需结合实际网络环境测试。
维护者依赖风险：由个人开发者 wpank 维护，虽经 Clawhub 平台认证，但长期更新频率和 React 19+ 新特性适配存在不确定性。