用途：审查 React/前端代码的性能问题。核心原则是先测量再优化，通过浏览器自动化（Playwright MCP）获取真实指标，避免仅靠静态读代码下结论（资料称静态审查会漏掉 60-80% 的真实问题）。适用于页面加载超过 3 秒、用户反馈 UI 卡顿、生产发布前验证、包体积异常、内存持续增长等场景；不适用于后端 API 性能、Node.js 等非浏览器 JavaScript，以及不关注性能的纯设计评审。
主要能力：覆盖渲染指标（FCP<1.8s、LCP<2.5s、TTI<3.8s）、重复渲染（React DevTools Profiler）、包体积（webpack-bundle-analyzer）、内存泄漏（堆快照对比，增长超 10% 视为疑似泄漏）、图片（格式/尺寸/懒加载）、布局偏移（CLS<0.1）、网络瀑布、状态管理（Context 级联、选择器效率）等类别。典型问题与修法包括：路由级代码分割、用 lodash-es/date-fns 替换重库、列表虚拟化、WebP/AVIF、为 useEffect 增加清理函数。
使用方式：先确认 Playwright MCP 已配置，可用 grep -A5 "playwright" ~/.claude/mcp.json 检查；未配置时需安装 @modelcontextprotocol/server-playwright。流程为：测量基线指标→分析并列出前 3-5 个有实测依据的问题→按模板呈现证据与计划→获得用户明确批准后逐个类别实施→每步重新测量验证，回归则回滚。测量阶段需真实环境（localhost 或预发地址、可能的登录凭据）、建议开启 Fast 3G/Slow 4G 网络限速。
限制：资料设有硬性约束——未完成测量不得进行代码审查式优化、不得建议优化或实施改动；无法测量时应先请求安装前置工具并等待。包体积分析依赖项目构建与 webpack-bundle-analyzer；部分检测（React Profiler、内存 API）依赖浏览器能力。具体价格、平台支持范围等资料暂未提供。