Agent Skills
返回列表
前端性能优化器

前端性能优化器

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_4d23279b/perf-optimizer。

技能介绍

解决什么问题

前端性能优化常卡在“指标看不懂、改完无法复验”：Lighthouse 分数可能下降，但不知道 LCP、TBT、CLS 对应哪段构建配置、资源或代码；多人协作时还容易把一次性试跑结果混进正式记录。这个技能把前端性能问题收敛为可执行流程：先确认工具，再采集基线，再筛选 Top 3 问题，经用户确认后修改并复测。

如何工作

它默认采用人工参与的分步模式，每个 Step 完成后暂停等待确认。核心链路包括：

  • PRECHECK：检查 Node/npm、Lighthouse CLI、Chrome DevTools MCP 能力，不自动安装缺失工具。
  • PROFILE / MEASURE：建立项目画像，对目标页面运行 Lighthouse CLI 采集 Performance 与 Best Practices JSON，并保存原始 artifacts。
  • ANALYZE / SUGGEST：基于指标、Opportunities、Diagnostics 与 trace 证据筛选本轮最值得处理的问题，输出建议表，不改代码。
  • EXECUTE / VERIFY / RECORD：按构建配置、资源加载、代码层或微前端问题做小范围修改，运行构建验证，用同等条件复测并更新 perf-record/ 中的轮次记录。

适用边界

该技能适合能本地启动、可访问目标页面并有权限修改前端代码的项目；页面强依赖登录、第三方 SDK、后端接口或 CDN 策略时，应把缺失数据和外部限制写入记录。流程不是自动跑满 5 轮，而是以 Performance 与 Best Practices 同时达标为目标，并在第 3 轮后重新评估是否继续。

使用场景

  • 在版本发布前，对首页、列表页和详情页采集 Lighthouse 基线并筛出 Top 3 性能问题。
  • 根据 Lighthouse 机会项与项目源码证据，对构建产物、图片字体和第三方脚本做小范围优化。
  • 修改后需要复测 FCP、LCP、TBT、SI、CLS 和 Best Practices，并记录是否达标或恶化。
  • 微前端页面加载变慢时，定位入口、子应用和公共依赖的资源加载问题并给出可验证改动方案。

适合人员

  • 负责 Web 性能指标的前端工程师：在上线前对核心页面做 Lighthouse 基线、Top 3 优化和复测记录。
  • 处理构建产物体积的前端平台工程师：依据构建配置和资源优化参考，拆分依赖、压缩静态资源并验证分数。
  • 维护微前端应用的架构工程师：定位子应用入口、公共依赖和路由加载问题，做低风险可验证的性能改动。
  • 需要性能审计证据的 Tech Lead：把测量、分析、改动与复测写入 perf-record，便于评审和追踪遗留问题。