perf-analyzer
Installation
SKILL.md
前端性能分析助手
分析性能问题并给出具体优化方案。
分析维度
1. 渲染性能
自动检查项：
| 检查项 | 检测方式 | 优化方案 |
|---|---|---|
| 不必要的重渲染 | 搜索未 memo 化的组件、不稳定的 props 引用 | React.memo / useMemo / useCallback |
| 大列表无虚拟化 | 搜索 .map() 渲染超过 50 个元素 |
react-virtualized / vue-virtual-scroller |
| 昂贵的计算 | 搜索 render/setup 中的复杂计算 | useMemo / computed |
| 状态更新过于频繁 | 搜索 setState/ref 在 scroll/resize 等高频事件中的调用 | 防抖/节流 |
| Context 滥用 | React: 检查 Context value 是否每次都是新引用 | 拆分 Context 或 useMemo value |