80 lines
2.2 KiB
Markdown
80 lines
2.2 KiB
Markdown
---
|
||
name: performance-audit
|
||
version: 1.0.0
|
||
description: "分析并优化应用性能。当用户报告页面慢、加载卡或包体积大时使用。涵盖前端渲染、网络、打包和数据库四个维度。"
|
||
---
|
||
|
||
> ⚠️ 核心执行流程已在 `.cursor/rules/022-performance.mdc` 中由 Cursor 自动注入。
|
||
> 本文件提供完整模板、代码示例和边缘场景处理，供 Agent 按需深入 Read。
|
||
|
||
# Performance Audit
|
||
|
||
## 触发条件
|
||
|
||
用户报告性能问题、请求性能优化或要求性能审计。
|
||
|
||
## 执行流程
|
||
|
||
### 1. 性能基线
|
||
|
||
收集当前数据：
|
||
```bash
|
||
# 前端打包分析 (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 达标
|