performance-profiling by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill performance-profiling测量、分析、优化——按此顺序进行。
执行以下脚本进行自动化性能剖析：
| 脚本 | 用途 | 用法 |
|---|---|---|
scripts/lighthouse_audit.py | Lighthouse 性能审计 | python scripts/lighthouse_audit.py https://example.com |
| 指标 | 良好 | 较差 | 衡量内容 |
|---|---|---|---|
| LCP | < 2.5s |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
| > 4.0s |
| 加载性能 |
| INP | < 200ms | > 500ms | 交互响应 |
| CLS | < 0.1 | > 0.25 | 视觉稳定性 |
| 阶段 | 工具 |
|---|---|
| 开发阶段 | 本地 Lighthouse |
| CI/CD | Lighthouse CI |
| 生产环境 | RUM |
1. 建立基线 → 测量当前状态
2. 识别问题 → 找到瓶颈
3. 修复 → 进行针对性更改
4. 验证 → 确认改进效果
| 问题 | 工具 |
|---|---|
| 页面加载 | Lighthouse |
| 打包大小 | 打包分析器 |
| 运行时 | DevTools 性能面板 |
| 内存 | DevTools 内存面板 |
| 网络 | DevTools 网络面板 |
| 问题 | 迹象 |
|---|---|
| 依赖项过大 | 位于打包文件顶部 |
| 代码重复 | 多个代码块 |
| 未使用代码 | 覆盖率低 |
| 缺少代码分割 | 单个大块文件 |
| 发现 | 措施 |
|---|---|
| 大型库 | 导入特定模块 |
| 重复依赖 | 去重、更新版本 |
| 路由在主包中 | 代码分割 |
| 未使用的导出 | 摇树优化 |
| 模式 | 含义 |
|---|---|
| 长任务 (>50ms) | 阻塞 UI |
| 许多小任务 | 可能存在批处理机会 |
| 布局/绘制 | 渲染瓶颈 |
| 脚本 | JavaScript 执行 |
| 模式 | 含义 |
|---|---|
| 堆内存增长 | 可能存在泄漏 |
| 大保留内存 | 检查引用 |
| 分离的 DOM | 未清理 |
| 症状 | 可能原因 |
|---|---|
| 初始加载慢 | JS 文件过大、渲染阻塞 |
| 交互响应慢 | 繁重的事件处理器 |
| 滚动时卡顿 | 布局抖动 |
| 内存增长 | 泄漏、保留的引用 |
| 优先级 | 措施 | 影响 |
|---|---|---|
| 1 | 启用压缩 | 高 |
| 2 | 图片懒加载 | 高 |
| 3 | 路由代码分割 | 高 |
| 4 | 缓存静态资源 | 中 |
| 5 | 优化图片 | 中 |
| ❌ 避免 | ✅ 应该 |
|---|---|
| 猜测问题 | 先进行剖析 |
| 微优化 | 解决最大的问题 |
| 过早优化 | 在需要时优化 |
| 忽略真实用户 | 使用 RUM 数据 |
记住： 最快的代码是不运行的代码。优化之前先移除。
每周安装量
155
仓库
GitHub 星标
22.6K
首次出现
2026年1月25日
安全审计
安装于
opencode126
claude-code119
gemini-cli117
codex111
cursor111
github-copilot108
Measure, analyze, optimize - in that order.
Execute these for automated profiling:
| Script | Purpose | Usage |
|---|---|---|
scripts/lighthouse_audit.py | Lighthouse performance audit | python scripts/lighthouse_audit.py https://example.com |
| Metric | Good | Poor | Measures |
|---|---|---|---|
| LCP | < 2.5s | > 4.0s | Loading |
| INP | < 200ms | > 500ms | Interactivity |
| CLS | < 0.1 | > 0.25 | Stability |
| Stage | Tool |
|---|---|
| Development | Local Lighthouse |
| CI/CD | Lighthouse CI |
| Production | RUM (Real User Monitoring) |
1. BASELINE → Measure current state
2. IDENTIFY → Find the bottleneck
3. FIX → Make targeted change
4. VALIDATE → Confirm improvement
| Problem | Tool |
|---|---|
| Page load | Lighthouse |
| Bundle size | Bundle analyzer |
| Runtime | DevTools Performance |
| Memory | DevTools Memory |
| Network | DevTools Network |
| Issue | Indicator |
|---|---|
| Large dependencies | Top of bundle |
| Duplicate code | Multiple chunks |
| Unused code | Low coverage |
| Missing splits | Single large chunk |
| Finding | Action |
|---|---|
| Big library | Import specific modules |
| Duplicate deps | Dedupe, update versions |
| Route in main | Code split |
| Unused exports | Tree shake |
| Pattern | Meaning |
|---|---|
| Long tasks (>50ms) | UI blocking |
| Many small tasks | Possible batching opportunity |
| Layout/paint | Rendering bottleneck |
| Script | JavaScript execution |
| Pattern | Meaning |
|---|---|
| Growing heap | Possible leak |
| Large retained | Check references |
| Detached DOM | Not cleaned up |
| Symptom | Likely Cause |
|---|---|
| Slow initial load | Large JS, render blocking |
| Slow interactions | Heavy event handlers |
| Jank during scroll | Layout thrashing |
| Growing memory | Leaks, retained refs |
| Priority | Action | Impact |
|---|---|---|
| 1 | Enable compression | High |
| 2 | Lazy load images | High |
| 3 | Code split routes | High |
| 4 | Cache static assets | Medium |
| 5 | Optimize images | Medium |
| ❌ Don't | ✅ Do |
|---|---|
| Guess at problems | Profile first |
| Micro-optimize | Fix biggest issue |
| Optimize early | Optimize when needed |
| Ignore real users | Use RUM data |
Remember: The fastest code is code that doesn't run. Remove before optimizing.
Weekly Installs
155
Repository
GitHub Stars
22.6K
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode126
claude-code119
gemini-cli117
codex111
cursor111
github-copilot108
React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性
118,000 周安装