Use when auditing or reducing JavaScript and CSS bundle sizes, setting performance budgets, choosing lighter alternatives to heavy libraries, configuring tree shaking, code splitting, and lazy loading. Trigger when the user mentions bundle size, JavaScript size, tree shaking, code splitting, lazy loading, or performance budget.
Instalación
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Use when auditing or reducing JavaScript and CSS bundle sizes, setting performance budgets, choosing lighter alternatives to heavy libraries, configuring tree shaking, code splitting, and lazy loading. Trigger when the user mentions bundle size, JavaScript size, tree shaking, code splitting, lazy loading, or performance budget.
CANON · Bundle Size
Every kilobyte of JavaScript costs twice: once to download, once to parse and execute. CSS blocks render. Both have budgets.
Budgets
Asset
Budget (gzipped)
Initial JS (critical path)
≤ 200KB
Total JS (all routes)
≤ 500KB
CSS (total)
≤ 60KB
Total page weight (first load)
≤ 1.5MB
These are starting points. Rich apps (maps, editors) may exceed them with justification. Simple marketing pages should come in far under.
Strategies (ordered by impact)
Don't ship what you don't use. Audit imports. Remove dead code. Tree shake.
Replace heavy libraries with lighter alternatives. moment → date-fns. lodash → per-function imports or native. chart.js → uPlot.
Code-split by route.React.lazy() + Suspense, or dynamic import(). Every route loads only its code.
Lazy-load below-the-fold components. Image galleries, comments, maps — load when the user scrolls near.
Externalize large deps. CDN-hosted React/Vue/Angular with proper cache headers.
