react-performance

react-performance 是一套面向 React 与 Next.js 生态的专业性能优化指南，由社区开发者 wpank 维护。该技能以文档型知识库形式，系统化整理了从异步数据获取到 JavaScript 执行效率的 7 大优化维度，为前端开发者提供从代码审查到架构设计的全链路性能调优方案。

核心用法上，该技能采用优先级分层策略，将优化手段按影响力划分为关键（Critical）、高（High）、中（Medium）、低（Low）四级。涵盖消除异步瀑布流（Async Waterfalls）、Bundle 体积优化、Server Components 架构最佳实践、重渲染控制、渲染性能、客户端数据管理以及底层 JS 性能优化七大类别。每个类别均提供具体的代码对比示例（BAD vs GOOD），并配套 Quick Decision Guide 帮助开发者根据症状快速定位优化方向。

显著优点在于其极强的实战导向与前沿性。技能不仅覆盖传统优化手段（如 useMemo、动态导入），更深入 React 18/19 新特性，包括 React Server Components (RSC) 的序列化优化、React.cache() 的请求级去重、Suspense 边界的策略性使用，以及 React Compiler 时代下的 memo 使用建议。代码示例采用 TypeScript 编写，类型安全且可直接用于生产环境。

潜在局限性主要包括来源可信度与场景适配性。作为 T3 级个人来源项目，其建议虽经安全审计无技术风险，但权威性不及 React 官方或 Meta 团队文档。部分优化建议（如 barrel file 避免、RSC 重构模式）需特定版本支持（Next.js 13.5+），且性能优化本身存在"过早优化"陷阱，需结合实际 Lighthouse 或 RUM 数据谨慎应用。

该技能适合中高级 React/Next.js 开发者、前端架构师及代码审查人员使用，特别适用于重构遗留项目、构建高性能 SSR/SSG 应用，或建立团队性能规范场景。

使用风险方面，除来源权威性需注意外，主要风险在于技术债与版本兼容性。部分 Server Components 模式仅适用于最新 Next.js App Router，对 Pages Router 项目可能产生误导。此外，过度优化可能牺牲代码可读性，建议在关键路径（CRITICAL/HIGH 类别）优先实施，中低风险优化需权衡维护成本。

核心用法

本 Skill 是一份系统性的 React 与 Next.js 性能优化最佳实践文档，按影响力优先级分为7个核心类别：

1. 异步优化——消除请求瀑布（CRITICAL）

• 使用 Promise.all 并行化独立请求，避免顺序 await 导致的多次往返
• 将 await 移至真正需要的分支，减少不必要的阻塞
• 利用 Suspense 实现流式渲染，结合 use() 共享 promise 避免重复获取

2. Bundle 体积优化（CRITICAL）

• 避免 barrel 文件导入，改用具体模块路径（如 lucide-react/dist/esm/icons/check）
• 使用 Next.js 动态导入 dynamic() 延迟加载重型组件
• 预加载策略：在用户意图触发时（hover/focus）提前加载

3. Server Components 架构（HIGH）

• 最小化 RSC 边界处的序列化数据，仅传递客户端必需字段
• 通过组件组合实现并行数据获取，避免树内顺序执行
• 使用 React.cache() 实现请求级去重，after() 处理非阻塞操作

4. 重渲染优化（MEDIUM）

• 渲染时派生状态替代 useEffect，函数式 setState 确保回调稳定
• 延迟读取动态状态、懒初始化、订阅派生布尔值
• 使用 startTransition 处理非紧急更新，提取昂贵计算至 memoized 组件

5. 渲染性能（MEDIUM）

• CSS content-visibility: auto 优化长列表初始渲染
• 将静态 JSX 提升至组件外部避免重复创建

6. 客户端数据（MEDIUM）

• SWR 实现请求去重与智能缓存

7. JS 性能（LOW-MEDIUM）

• Set/Map O(1) 查找替代数组 includes，合并数组迭代减少遍历次数

显著优点

• 权威性高：基于 React 核心团队及 Next.js 官方推荐的现代架构模式
• 实战导向：每个模式配有 BAD/GOOD 对比代码，即学即用
• 优先级清晰：按 CRITICAL/HIGH/MEDIUM 分级，便于快速决策
• 前瞻兼容：涵盖 React Compiler 自动优化方向，未来适配性强

潜在局限

• 框架绑定深：大量示例依赖 Next.js 特性（next/dynamic, next/server 等），纯 React 项目需自行适配
• 无自动检测：作为文档型 Skill，无法自动分析现有代码性能瓶颈
• 版本敏感：Server Components、React.cache() 等需较新版本支持
• 示例简化：部分代码片段为教学目的简化，生产环境需补充错误处理

适合人群

• React/Next.js 中高级开发者
• 负责性能优化的技术负责人
• 需要系统性性能知识库的前端团队

常规风险

• 过度优化风险：低优先级模式（如 JS 微优化）可能牺牲代码可读性
• 边界理解偏差：Server/Client 组件边界处理不当可能导致序列化错误或意外的客户端 bundle 增大
• 缓存策略误用：React.cache() 参数需为原始值，错误使用对象可能导致缓存失效

安全方面，本 Skill 为纯 Markdown 文档，无可执行代码，已通过 CLS S+ 级认证。