陌讯skills聚合平台

perf-analyzer

📁 sakumyz/skills 📅 7 days ago
8
总安装量
6
周安装量
#34239
全站排名
安装命令
npx skills add https://github.com/sakumyz/skills --skill perf-analyzer

Agent 安装分布

opencode 6
gemini-cli 6
github-copilot 6
codex 6
kimi-cli 6
amp 6

Skill 文档

前端性能分析助手

分析性能问题并给出具体优化方案。

分析维度

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

2. Bundle 分析

自动检查项：

检查项 检测方式 优化方案
大型依赖全量导入 import lodash vs import { debounce } from 'lodash-es' 按需导入 / 替换为轻量替代
未使用的依赖 package.json 中有但代码中未引用 移除
未代码分割 路由组件是否使用 lazy/defineAsyncComponent 动态导入
重复依赖 检查 lock 文件中的版本重复 统一版本
图片资源未优化 搜索 .png/.jpg 直接引用 WebP 格式 + 压缩

3. 网络请求

自动检查项：

检查项 检测方式 优化方案
请求瀑布流 串行的 await API 调用 Promise.all 并行
缺少缓存 相同 API 多次调用 SWR / React Query / 手动缓存
缺少请求取消 组件卸载未取消进行中的请求 AbortController
未处理竞态 快速切换导致旧请求覆盖新数据 竞态保护

4. 内存泄漏

自动检查项：

检查项 检测方式 优化方案
事件监听未移除 addEventListener 无对应 removeEventListener cleanup 函数
定时器未清理 setInterval/setTimeout 无对应 clear cleanup 函数
闭包持有大对象 事件回调/定时器中引用 state 或大数据 WeakRef 或解绑

工作流程

  1. 读取项目配置：package.json、构建配置
  2. 按维度扫描：根据用户描述的问题选择扫描维度
  3. 输出报告：
## 性能分析报告

### 概要
- 发现 N 个性能问题
- 预计优化后 [加载时间/渲染次数/bundle大小] 改善 XX%

### 🔴 高优先级
#### [问题描述]
- **位置**: `file.tsx` L42
- **影响**: [具体影响]
- **优化方案**: [具体方案 + 代码示例]

### 🟡 中优先级
...

### 🟢 低优先级
...

常用优化速查

详细的优化模式和代码示例，在分析时根据具体问题按需提供。

React 优化关键词

  • React.memo、useMemo、useCallback — 减少重渲染
  • React.lazy + Suspense — 代码分割
  • useTransition / useDeferredValue — 优先级调度

Vue 3 优化关键词

  • v-once / v-memo — 减少重渲染
  • defineAsyncComponent — 代码分割
  • shallowRef / shallowReactive — 减少深层响应式追踪
  • <KeepAlive> — 缓存组件实例
GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。