← ClaudeAtlas

bundle-budgetlisted

Set and enforce a JavaScript bundle budget — measure the delta, attribute what grew, split at the right seams, and judge whether a dependency is worth its weight. Load when adding a dependency or reviewing bundle impact.
soumit-kaz/lazysitter · ★ 1 · Code & Development · score 69
Install: claude install-skill soumit-kaz/lazysitter
# Bundle budget Every kilobyte of JavaScript is downloaded, parsed, compiled and executed on the user's device — and the parse/execute cost is the part that hurts on a mid-range phone, not the download. ## State a budget or you have said nothing A budget is a number: *"this feature adds at most 15KB gzipped to the `/dashboard` entry."* "Keep an eye on bundle size" cannot fail, and a check that cannot fail is not a check. Where a measurement harness exists, the perf-auditor compares the measured delta against that number and the verdict is mechanical. ## Measure the delta, do not estimate it ```bash # whichever the repo has npx @next/bundle-analyzer / ANALYZE=true npm run build npx size-limit npx vite-bundle-visualizer ``` Build **before** and **after**, and report the delta per chunk and per route entry. If no harness exists, say `cannot-verify-offline` — do not present an estimate as a measurement. ## Attribute the growth "The bundle grew 40KB" is a fact. *"The bundle grew 40KB because `date-fns` is imported at the root of a shared util that every route pulls in"* is actionable. Always give the second form. The analyzer's treemap tells you which module owns the bytes. ## Judging a dependency ```bash lazysitter fe-index signals --rule PERF-HEAVY-IMPORT lazysitter fe-index dup --kind util # does a local equivalent already exist? ``` Ask, in order: 1. **Does the repo already have something that does this?** The cheapest rejection. Two date libraries or two H