vibe_coding/.cursor/skills/performance-audit/SKILL.md

name, version, description

name	version	description
performance-audit	1.0.0	分析并优化应用性能。当用户报告页面慢、加载卡或包体积大时使用。涵盖前端渲染、网络、打包和数据库四个维度。

⚠️ 核心执行流程已在 .cursor/rules/022-performance.mdc 中由 Cursor 自动注入。 本文件提供完整模板、代码示例和边缘场景处理，供 Agent 按需深入 Read。

Performance Audit

触发条件

用户报告性能问题、请求性能优化或要求性能审计。

执行流程

1. 性能基线

收集当前数据：

# 前端打包分析 (Vite)
for dir in Case-Database-Frontend-user Case-Database-Frontend-admin; do
  echo "=== $dir ==="
  cd $dir && npm run build 2>&1 | tail -20
  du -sh dist/
  cd ..
done

# 后端状态
cd Case-Database-Backend && php bin/hyperf.php describe:routes | wc -l

2. 四维度审计

前端渲染

• Vue DevTools 分析不必要的重渲染
• 检查大列表是否缺少 v-memo / shallowRef
• 检查大列表是否使用虚拟化（@tanstack/vue-virtual）
• 检查图片是否压缩（WebP 格式 + CDN）
• 管理端：Element Plus 是否按需导入（用户端不使用 Element Plus）

网络请求

• 是否有瀑布式请求（串行 → 并行）
• API 响应是否有 Redis 缓存策略
• Axios 是否配置请求/响应拦截
• 静态内容是否配置 Nginx 缓存

打包体积

• 是否有不必要的大依赖
• 是否使用 dynamic import 进行代码分割
• 是否 tree-shaking 有效
• 检查 barrel exports 是否导致全量导入

数据库查询

• N+1 查询检测
• 缺少索引的慢查询
• 未使用 select 限制字段
• 大数据集未分页

3. Core Web Vitals 目标

指标	目标	说明
LCP	< 2.5s	Largest Contentful Paint
INP	< 200ms	Interaction to Next Paint
CLS	< 0.1	Cumulative Layout Shift
FCP	< 1.8s	First Contentful Paint
TTFB	< 800ms	Time to First Byte

4. 输出优化建议

按影响力排序，每个建议包含：预期收益 + 实施难度 + 具体代码。

验证

1. 优化前后有可量化对比
2. 未引入功能回归
3. Core Web Vitals 达标