Performance Audit

Workflow

1. Detect build tool from package.json (vite, webpack, next, rollup)

2. Run production build if no recent build exists:

   • Vite: npm run build
   • Next.js: npm run build (reads .next/analyze/ if ANALYZE=true)

3. Analyze bundle output (see budget-thresholds.md):

   Vite:

   npx vite-bundle-visualizer
   

   webpack/Next.js:

   npx webpack-bundle-analyzer <stats-file>
   

4. Check package.json dependencies for known heavy packages:

   • moment → suggest date-fns or dayjs
   • lodash → suggest tree-shakeable imports or native alternatives
   • @mui/material (full import) → suggest named imports

5. Report findings with size impact

Output format

• Bundle summary: total size / gzipped size vs budget
• Large chunks: name + size + % of total
• Heavy deps: package + size + lighter alternative
• Quick wins: sorted by estimated savings

Rules

• Compare against budgets in budget-thresholds.md
• Report gzipped sizes (what the browser downloads)
• Never auto-change dependencies — report and suggest only

Error Handling

• If build fails → report the build error and stop; fix build issues before auditing
• If no build output found → run the production build first before analyzing
• If build tool is unrecognized → fall back to scanning package.json dependencies for heavy packages only