mcpField
P
performance-profiling

performance-profiling

github.com/vudovn开发8.2k196 次安装9 周前更新
代码仓库

关于 performance-profiling

performance-profiling 是面向 Web 开发者的性能测量与优化指南，按测量、定位、修复和验证的流程分析页面加载、运行时及内存问题，并附 Lighthouse 审计脚本。

主要功能

  1. 01Core Web Vitals 指标参考
  2. 02四步性能分析流程
  3. 03按问题选择分析工具
  4. 04Bundle 问题识别与优化建议
  5. 05运行时与内存分析指引
  6. 06Lighthouse 审计脚本

适用场景

  1. 01检查页面加载与 Core Web Vitals
  2. 02定位过大的 Bundle 或重复代码
  3. 03分析交互卡顿与内存增长
  4. 04运行 Lighthouse 审计验证页面表现

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vudovn/ag-kit --skill performance-profiling

安装后在 Claude Code 中输入/performance-profiling确认已加载。

附带文件scripts/bundle_analyzer.pyscripts/lighthouse_audit.py

详细介绍

性能分析

按顺序进行测量、分析和优化。

🔧 运行时脚本

运行以下脚本进行自动化性能分析：

脚本用途用法
scripts/lighthouse_audit.pyLighthouse 性能审计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/CDLighthouse 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