前言¶

前端性能问题直接影响用户体验、页面加载速度和 SEO 排名。在项目迭代过程中，性能指标容易在不知不觉中恶化，排查和修复往往依赖人工经验，缺乏系统化的流程。这里介绍一个针对前端项目的性能优化 Skill，它将性能审计、指标优化、代码修复和复测验证串联成一个可追踪的工作流。

这是什么¶

前端性能优化器是一个面向前端项目的性能优化 Skill，由用户 user_4d23279b 在 SkillHub 社区发布，版本为 1.0.1，分类为 dev-programming。它通过结构化的流程帮助开发者完成性能诊断、优化建议、代码修复和复测验证，并生成可追踪的性能优化记录。

核心功能¶

根据已核实的信息，该 Skill 支持以下能力：

• Lighthouse 性能审计：对前端项目进行 Lighthouse 性能审计，获取性能评分和诊断信息。
• Core Web Vitals 优化：针对 Core Web Vitals 指标提供优化支持。
• 首屏加载优化：优化首屏加载性能。
• 白屏时间优化：减少白屏时间，提升感知性能。
• 打包体积分析：分析打包后的体积构成，定位可优化点。
• 资源加载优化：对资源加载进行优化建议。
• Best Practices 修复：提供 Best Practices 相关的修复建议。
• 微前端性能排查：支持微前端场景下的性能排查。
• 生成可追踪的性能优化记录：将性能优化过程和结果记录下来，便于追溯和复盘。

安装与启用¶

官方地址：https://www.skillhub.cn/skills/user_4d23279b/perf-optimizer

坐标：@user_4d23279b/perf-optimizer

（关于具体安装命令与配置，可参考官方页面说明。）

典型用法¶

基于已核实的能力，典型使用流程如下：

• 性能诊断：使用该 Skill 对前端项目进行性能审计，获取 Lighthouse 评分与诊断报告。
• 指标分析：查看 Core Web Vitals、首屏加载、白屏时间、打包体积等关键指标。
• 生成建议：根据诊断结果，获取针对性的优化建议。
• 代码修复：执行用户确认的改动，对代码进行优化。
• 复测验证：复测性能指标，确认优化效果。
• 生成记录：将优化过程与结果记录为可追踪的性能优化记录。

适用场景与注意¶

适合用于以下场景：

• Vue、React、Vite、Webpack 等前端项目。
• 需要进行性能诊断、优化建议、代码修复和复测验证的场景。
• 对 Lighthouse、Core Web Vitals、首屏加载、白屏时间、打包体积、资源加载、Best Practices、微前端性能有优化需求的场景。

注意：

• 需要配合相关性能测试环境与工具使用。
• 具体安装与启用方式以官方说明为准。

短结尾¶

前端性能优化器提供了一个从审计到修复再到复测的闭环流程，帮助前端项目持续优化性能。官方地址：https://www.skillhub.cn/skills/user_4d23279b/perf-optimizer