perf-audit

用途

perf-audit 是一个用于审计前端打包体积与性能的技能。当用户提出“audit performance”“/perf-audit”“analyze bundle”“check bundle size”或希望排查体积问题时使用。

工作流程

1. 从 package.json 识别构建工具（vite、webpack、next、rollup）。
2. 通过项目自身的任务运行器执行生产构建（从 package.json 自动识别）。
3. 分析构建输出——仅限非交互方式。审计中绝不启动浏览器或长时间运行的服务器，因为它们会让自动化运行挂起。按优先级依次选择以下方式：
   • 直接测量产出的文件：对输出目录中的每个文件（例如 dist/assets/*.js）报告原始大小加 gzip 后大小——gzip -c <file> | wc -c。这种方式始终有效，且不需要额外工具。
   • 按模块拆分，作为静态产物（非服务器）：
     • Vite/Rollup：npx source-map-explorer 'dist/assets/*.js'，或添加配置为向文件输出 JSON/HTML 的 rollup-plugin-visualizer。
     • webpack/Next.js：npx webpack-bundle-analyzer -m static -r report.html <stats-file>（写入文件；不要使用默认的服务器模式）。
     • npx vite-bundle-visualizer 会打开浏览器并阻塞——只建议用户手动探查时使用，不要在此处运行。
4. 检查 package.json 中已知的重型包。
5. 报告带体积影响的发现。
6. 与标准行业阈值比较；报告 gzip 后大小。

输出格式

• 打包摘要：总大小 / gzip 后大小 与预算对比
• 大 chunk：名称 + 大小 + 占总量百分比
• 重型依赖：包 + 大小 + 更轻的替代方案
• 快速优化项：按预计节省量排序

规则

• 报告 gzip 后大小（浏览器实际下载的体积）。
• 绝不自动更改依赖——只报告和建议。

错误处理

• 构建失败——报告错误并停止；审计前先修复构建问题。
• 未找到构建输出——先运行生产构建。
• 构建工具无法识别——回退为仅扫描 package.json 中的重型包。