auditing-performance

性能审计

当用户要求优化性能、缩短加载时间、修复加载缓慢的页面或审计 Core Web Vitals 时，使用此技能。

步骤

1. 分析包大小

   • 运行 npx @next/bundle-analyzer（Next.js）或 npx vite-bundle-visualizer（Vite），找出较大的依赖项。
   • 查找可用更轻量替代方案替换的大型库（例如，moment → date-fns，lodash → 单独导入或使用原生方法）。
   • 检查包中是否有重复依赖项。
   • 验证 tree-shaking 是否正常工作（没有通过 barrel 文件重新导出引入未使用的代码）。

2. 审计渲染性能

   • 找出不必要地重新渲染的组件——检查 JSX 属性中是否内联创建了对象、数组或函数。
   • 检查渲染路径中是否有应使用 useMemo 的高开销计算。
   • 验证列表是否使用了正确的 key 属性（动态列表不要使用数组索引）。
   • 检查是否存在布局抖动（在循环中先读取 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. 生成建议——按影响（高／中／低）对优化措施排序，并为每项估算所需工作量。

注意事项

• 关注可衡量的改进——使用 Lighthouse、WebPageTest 或 DevTools 中的 Performance 面板。
• 不要过早优化——先进行性能分析，再优化瓶颈。
• 对于 React 应用，使用 React DevTools Profiler 找出运行缓慢的组件。