用途：面向生产环境 React 应用的性能优化，覆盖组件渲染性能、打包拆分、内存管理、列表虚拟化与 Core Web Vitals 改善。
主要能力：使用 React DevTools Profiler 定位瓶颈（commit/render 耗时、多余渲染、组件数量、同步优先级）；通过 React.memo、useCallback、useMemo 消除内联对象与函数导致的重复渲染；用 React.lazy、Suspense 做路由级与组件级代码分割，并借助 webpack-bundle-analyzer、@next/bundle-analyzer 分析体积；排查内存泄漏（事件监听、定时器、AbortController 清理）；用 react-window、react-virtualized、@tanstack/react-virtual 实现大列表虚拟化；用 web-vitals 采集 LCP、FID、CLS、FCP、TTFB；在 React 18 下使用 useTransition、useDeferredValue 处理非紧急更新。
使用方式：先做环境检测，例如 npm list react --depth=0、npm list web-vitals webpack-bundle-analyzer @next/bundle-analyzer --depth=0，并识别 Next.js、Vite、Webpack 或 CRA 配置；随后按“先剖析、再测量 Core Web Vitals、按影响排序、验证改进、持续监控”的流程执行。
适用场景：组件渲染超过 16ms、频繁无谓重渲染、输入卡顿、大列表滚动缓慢、首屏包体过大、内存持续增长等。
限制：若问题属于通用 React 模式与 hooks、CSS 样式性能、测试性能或后端/API 性能，该技能会停止并建议改用对应专家技能；CRA 项目可能需要 eject 才能做部分优化。具体收费、平台与效果数据暂未提供。