Supercent Performance Optimization：AI 驱动的 Web 性能优化技能 Skill 技能

技能简介

Supercent Performance Optimization 是一款引导 AI 编程智能体对 Web 应用进行全栈性能优化的技能。它覆盖前端渲染（React、Core Web Vitals）、后端查询、缓存策略和构建产物分析四大领域，通过结构化的测量-诊断-优化-验证流程，帮助开发团队系统性地改善页面加载速度和交互响应体验。

核心能力

• 性能测量与基线建立：引导 AI 使用 Lighthouse、Web Vitals（LCP、CLS、FID/INP）和浏览器 DevTools 执行性能基线测量，输出可量化的改进前后对比数据。
• React 渲染优化：识别不必要的重渲染（re-render）源头，推荐 memoization、useMemo、useCallback 和组件边界调整等改造方案，降低 JS 执行主线程阻塞。
• Bundle 体积分析与裁剪：解析打包分析报告（webpack-bundle-analyzer、esbuild 等），识别大依赖、Tree Shaking 盲区，按需引入（lazy import）和动态导入（dynamic import）机会。
• 图片与资源优化：评估图片格式（WebP/AVIF）、响应式图片加载（srcset）、CDN 分发和资源预加载策略，给出与现有技术栈兼容的具体改造建议。
• 数据库查询优化：结合 N+1 检测、索引建议和查询重构，将慢查询拆解为高效的批量操作或缓存查询。
• Redis 缓存策略设计：评估读多写少和写多读少两种场景的缓存策略，设计合理的 Key 命名空间、TTL 和失效机制。
• 发布检查清单生成：为每次发版自动生成性能回归检查清单，包含重点监控指标、阈值和异常告警条件。

安装配置

前置要求

• 拥有 Web 应用仓库访问权限
• 项目使用主流前端框架（React/Vue/Next.js/Nuxt）或 Node.js 后端

安装步骤

1. 终端执行：npx skillstore add supercent-io/performance-optimization
2. 在项目中安装 Lighthouse CLI（如未安装）：npm install -g lighthouse
3. 确保 AI 编程工具可访问项目代码，并了解项目的构建工具（Vite/Webpack/esbuild）和部署平台

可选配置

• 配置 PERF_THRESHOLD_LCP=2500 和 PERF_THRESHOLD_CLS=0.1 环境变量设置性能达标阈值
• 在 CI 中配置性能回归门禁，超标则阻止合并（需项目已集成 Lighthouse CI）

使用步骤

1. 执行基础性能审计：发送提示词「审查此网页的基本性能问题，从测量步骤开始，然后列出最可能的改进项」
2. React 渲染分析：发送提示词「分析此 React 组件树中不必要的重渲染，推荐 memoization、callback 和组件边界改动」
3. Bundle 分析：发送提示词「审查此打包分析摘要，识别大型依赖、Tree Shaking 缺口、按需加载机会和更安全的替代方案」
4. 制定优化计划：发送提示词「为这个应用创建分优先级性能优化计划，包含前端、后端、数据库、缓存、测量和回归检查」
5. 验证改进效果：每次优化后，使用 Lighthouse CI 重新测量，对比 LCP/CLS/INP 变化，确认识差在阈值内。

适用场景

• 新功能上线前性能审查：在功能合并前评估其对 Core Web Vitals 的影响，避免上线后拖累用户体验。
• 慢页面优化攻坚：针对 LCP > 2.5s 或 CLS > 0.1 的慢页面，从前端到后端全链路分析瓶颈并制定优化路线图。
• Bundle 体积控制：新依赖引入前评估对最终产物大小的影响，防止「依赖膨胀」导致的加载劣化。
• 缓存架构设计：在为读多写少场景（如内容详情页、搜索结果）设计 Redis 缓存时，获取标准化的 Key 策略和失效方案。
• CI 性能门禁建立：将性能测量集成到持续集成流水线，对每次 PR 执行自动化 Lighthouse 检测，自动阻止性能下降的合并。
• 发版稳定性保障：制定发版前性能回归检查清单，在关键指标超标时触发告警，确保每次发布的用户体验不劣化。

适用人群

• 前端开发工程师（React/Vue 方向）
• 全栈工程师进行性能自审
• 技术 lead 进行性能专项技术债务清理
• DevOps 工程师配置性能 CI 门禁
• 产品经理了解功能改动的性能影响

工作原理

Supercent Performance Optimization 技能基于性能优化领域的六大维度（测量、前端渲染、Bundle、缓存、数据库、回归检查）构建了结构化的诊断框架。当用户描述一个性能问题或提交代码后，AI 依据框架引导，先执行量化测量建立基线，再按影响权重逐层分析（通常是前端渲染优先于后端查询），最终输出包含问题定位、影响评估和具体改进步骤的优化报告。每条建议均标注了预期收益（改善幅度）和实施成本（改动范围），方便团队按优先级推进。

官方链接

• Skill 页面：https://skillstore.io/skills/supercent-io-performance-optimization
• 安装命令：npx skillstore add supercent-io/performance-optimization
• GitHub 仓库：https://github.com/supercent-io/skills-template
• 作者：supercent-io（MIT License）