用途
当用户要求优化性能、减少加载时间、修复慢页面或审计 Core Web Vitals 时，可使用此技能。它提供了一套系统化的性能审计流程，覆盖前端打包、渲染、数据获取、数据库查询和静态资源等环节。
主要能力
该技能按以下步骤展开审计：
1. 分析打包体积
- 运行
npx @next/bundle-analyzer（Next.js）或npx vite-bundle-visualizer（Vite）来识别体积较大的依赖。 - 查找可替换为更轻量替代方案的大型库（例如 moment → date-fns，lodash → 单独导入或原生方法）。
- 检查打包中是否存在重复依赖。
- 验证 tree-shaking 是否生效（没有 barrel 文件重导出引入未使用代码）。
2. 审计渲染性能
- 识别不必要重渲染的组件——查找 JSX props 中内联创建的对象/数组/函数。
- 检查渲染路径中应使用 useMemo 的高开销计算。
- 验证列表使用了正确的 key props（动态列表不应使用数组索引）。
- 查找布局抖动（在循环中先读取 DOM 测量值再写入样式）。
3. 检查数据获取
- 识别请求瀑布——本可用 Promise.all 并行化的顺序 API 调用。
- 查找本可在服务端获取却在客户端获取的数据。
- 检查大数据集是否缺少分页。
- 验证 API 响应是否过度获取（返回客户端不需要的字段）。
4. 数据库查询优化
- 查找 N+1 查询模式（列表中每个条目一次查询）。
- 检查 WHERE、ORDER BY 和 JOIN 子句中使用的列是否缺少索引。
- 识别可使用指定列 SELECT 而非 SELECT * 的查询。
- 查找缺失的连接池。
5. 检查静态资源
- 验证图片使用现代格式（WebP/AVIF）且尺寸合适。
- 检查首屏以下的图片是否缺少
loading="lazy"。 - 验证字体使用 font-display: swap 并已预加载。
- 检查是否存在阻塞渲染的 CSS 或 JavaScript。
6. 生成建议
- 产出按影响程度（高/中/低）排序的优化清单，并为每项标注预估工作量。
使用方式
在用户提出性能相关需求时调用此技能，按上述步骤逐项审计，并最终输出优先级排序的优化建议。
适用场景
- 优化应用性能、缩短加载时间。
- 修复慢页面。
- 审计 Core Web Vitals。
- 排查打包体积、渲染、数据获取、数据库查询和资源加载方面的性能瓶颈。
限制与注意事项
- 关注可衡量的改进——使用 Lighthouse、WebPageTest 或 DevTools 的 Performance 面板。
- 不要过早优化——先做性能分析，再优化瓶颈。
- 对于 React 应用，使用 React DevTools Profiler 识别慢组件。
- 关于该技能的具体收费、价格、支持平台等信息，资料中暂未提供。