关于 performance-profiling
这项性能分析 Skill 提供测量、定位、修复和验证的网页性能工作流，面向排查页面加载、打包体积、运行时、内存和网络瓶颈的开发者，并附带 Lighthouse 审计脚本。
主要功能
- 01提供四步性能分析流程
- 02涵盖 Core Web Vitals
- 03指导分析打包内容
- 04说明运行时与内存信号
- 05附带 Lighthouse 审计脚本
适用场景
- 01排查页面加载缓慢
- 02发现过大或重复的打包内容
- 03诊断运行时或内存问题
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/performance-profiling确认已加载。
附带文件scripts/lighthouse_audit.py
详细介绍
性能分析
按顺序进行测量、分析和优化。
🔧 运行时脚本
运行以下脚本进行自动化性能分析：
| 脚本 | 用途 | 用法 |
|---|---|---|
scripts/lighthouse_audit.py | Lighthouse 性能审计 | python scripts/lighthouse_audit.py https://example.com |
1. 核心 Web 指标
目标
| 指标 | 良好 | 较差 | 衡量内容 |
|---|---|---|---|
| LCP | < 2.5s | > 4.0s | 加载速度 |
| INP | < 200ms | > 500ms | 交互性 |
| CLS | < 0.1 | > 0.25 | 稳定性 |
测量时机
| 阶段 | 工具 |
|---|---|
| 开发 | 本地 Lighthouse |
| CI/CD | Lighthouse CI |
| 生产 | RUM（真实用户监控） |
2. 性能分析工作流
4 步流程
1. BASELINE → Measure current state
2. IDENTIFY → Find the bottleneck
3. FIX → Make targeted change
4. VALIDATE → Confirm improvement
性能分析工具选择
| 问题 | 工具 |
|---|---|
| 页面加载 | Lighthouse |
| 包体积 | 包分析器 |
| 运行时 | DevTools Performance |
| 内存 | DevTools Memory |
| 网络 | DevTools Network |
3. 包分析
检查内容
| 问题 | 指标 |
|---|---|
| 依赖项过大 | 位于包顶部 |
| 代码重复 | 多个分块 |
| 未使用的代码 | 覆盖率低 |
| 缺少拆分 | 单个大分块 |
优化措施
| 发现 | 措施 |
|---|---|
| 库体积过大 | 按需导入特定模块 |
| 依赖重复 | 去重并更新版本 |
| 路由打包在主包中 | 进行代码拆分 |
| 未使用的导出 | 进行 Tree Shaking |
4. 运行时性能分析
Performance 选项卡分析
| 模式 | 含义 |
|---|---|
| 长任务（>50ms） | 阻塞 UI |
| 许多小任务 | 可能有批处理机会 |
| 布局/绘制 | 渲染瓶颈 |
| 脚本 | JavaScript 执行 |
Memory 选项卡分析
| 模式 | 含义 |
|---|---|
| 堆持续增长 | 可能存在泄漏 |
| 保留对象较大 | 检查引用 |
| 已脱离的 DOM | 未清理 |
5. 常见瓶颈
按症状分类
| 症状 | 可能原因 |
|---|---|
| 初始加载缓慢 | JS 体积大、阻塞渲染 |
| 交互缓慢 | 事件处理程序开销大 |
| 滚动时卡顿 | 布局抖动 |
| 内存持续增长 | 泄漏、保留引用 |
6. 快速见效的优化优先级
| 优先级 | 措施 | 影响 |
|---|---|---|
| 1 | 启用压缩 | 高 |
| 2 | 延迟加载图片 | 高 |
| 3 | 拆分路由代码 | 高 |
| 4 | 缓存静态资源 | 中 |
| 5 | 优化图片 | 中 |
7. 反模式
| ❌ 不要 | ✅ 应该 |
|---|---|
| 猜测问题所在 | 先进行性能分析 |
| 进行微优化 | 先解决最大的问题 |
| 过早优化 | 在需要时再优化 |
| 忽略真实用户 | 使用 RUM 数据 |
请记住： 运行得最快的代码，就是不会运行的代码。优化之前，先删除。
评论
支持 Markdown