（14866期）react-performance – React与Next.js性能优化实战指南

React与Next.js性能优化实战指南 来自社区开发者wpank的React性能优化技能，涵盖7大核心场景的代码级优化方案，助开发者构建高性能React应用。 使用说明 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 类别）优先实施，中低风险优化需权衡维护成本。 原始说明 React and Next.js performance optimization patterns. Use when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance. Triggers on tasks involving components, data fetching, bundle optimization, re-render reduction, or server component architecture.