用途
本技能用于 React 与 Next.js 应用的性能优化，内容来自 Vercel Engineering，覆盖 Next.js 16 与 React 19 时代的实践。其核心优化理念为：优先消除瀑布式请求，其次优化打包体积，最后进行微观优化。
主要能力
技能共包含 58 条优化规则，分为 8 个类别，另加针对 Next.js 16+ 的缓存组件章节。各章节按影响优先级划分：
- 第 1 章 消除瀑布式请求（CRITICAL，6 条规则）：并行获取、Promise.all()、Suspense 边界、预加载。每条瀑布会增加 100-500ms 以上延迟。
- 第 2 章 打包体积优化（CRITICAL，5 条规则）：动态导入、tree-shaking、避免 barrel 导入。直接影响可交互时间与最大内容绘制。
- 第 3 章 服务端性能（HIGH，7 条规则）：并行服务端获取、流式渲染、API 路由优化。
- 第 4 章 客户端数据获取（MEDIUM-HIGH，4 条规则）：SWR 去重、localStorage 缓存、事件监听。
- 第 5 章 重渲染优化（MEDIUM，12 条规则）：React.memo、useMemo、useCallback、组件结构。
- 第 6 章 渲染性能（MEDIUM，9 条规则）：虚拟化、图片优化、布局抖动。
- 第 7 章 JavaScript 性能（LOW-MEDIUM，12 条规则）：循环优化、缓存、RegExp 提升。
- 第 8 章 高级模式（VARIABLE，3 条规则）：useLatest hook、init-once 模式、事件处理器引用。
- 第 9 章 缓存组件（CRITICAL，4 节，仅 Next.js 16+）：use cache、cacheLife、PPR、cacheTag。
技能强调选择性阅读规则：只读取与当前任务相关的章节。对于性能审查，从 CRITICAL 章节开始，再转向 HIGH/MEDIUM。
使用方式
技能提供快速决策树，按症状定位章节：页面加载慢或可交互时间长，阅读第 1、2 章；打包体积过大（超过 200KB），阅读第 2 章；服务端渲染慢，阅读第 3 章；重渲染过多或 UI 卡顿，阅读第 5 章；渲染性能问题，阅读第 6 章；客户端数据获取问题，阅读第 4 章；需要高级模式，阅读第 8 章；需要 Next.js 16+ 缓存与 PPR，阅读第 9 章。
综合优化时按影响优先级执行：先处理 CRITICAL（第 1、2 章），再 HIGH（第 3 章），然后 MEDIUM（第 4、5、6 章），最后 LOW（第 7、8 章）。Next.js 16+ 项目还应关注第 9 章缓存组件，它可替代大多数传统重新验证。
技能还提供性能审查清单，分为必须修复、高优先级、中优先级和低优先级四档。必须修复项包括：无顺序数据获取、主包体积小于 200KB、应用代码中无 barrel 导入、对大组件使用动态导入、尽可能并行获取数据。
反模式部分列出常见错误，例如不要对独立操作使用顺序 await、不要导入整个库、不要在应用代码中使用 barrel 导出、不要跳过大型组件的动态导入、不要在 useEffect 中获取数据而不去重、不要忘记对昂贵计算做记忆化、不要在服务端组件可用时使用客户端组件。推荐做法包括使用 Promise.all() 并行获取、使用 dynamic() 动态导入、直接从具体路径导入、使用 Suspense 边界、利用 React 服务端组件、先测量再优化、使用 Next.js 内置优化（next/image、next/font）。
适用场景
- 构建新的 React 组件或功能时，预防瀑布与体积膨胀。
- 对现有应用进行性能审查。
- 调试页面加载慢、UI 卡顿等具体性能问题。
- 使用 Next.js 16 的缓存组件与 PPR 特性。
限制
资料未提供该技能的收费、价格、平台依赖或具体安装步骤。验证脚本路径为 scripts/react_performance_checker.py，命令为 python scripts/react_performance_checker.py <project_path>，用于自动化性能审计。相关技能链接以 @[skills/...] 形式列出，涉及 API 设计、数据库优化、测试策略、UI/UX 设计、TypeScript 模式与部署运维。