From alfred-dev
Analyzes and reduces frontend bundle sizes using webpack-bundle-analyzer, rollup-plugin-visualizer, source-map-explorer. Guides tree-shaking, code splitting, lazy loading for large bundles.
How this skill is triggered — by the user, by Claude, or both
Slash command
/alfred-dev:bundle-sizeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Este skill guía el proceso de analizar y reducir el tamaño de los bundles de una aplicación frontend. Cada kilobyte adicional en el bundle se traduce en mayor tiempo de descarga, más consumo de datos del usuario y mayor tiempo hasta la interactividad. En conexiones lentas o dispositivos modestos, un bundle sobredimensionado puede hacer que la aplicación sea inutilizable.
Este skill guía el proceso de analizar y reducir el tamaño de los bundles de una aplicación frontend. Cada kilobyte adicional en el bundle se traduce en mayor tiempo de descarga, más consumo de datos del usuario y mayor tiempo hasta la interactividad. En conexiones lentas o dispositivos modestos, un bundle sobredimensionado puede hacer que la aplicación sea inutilizable.
El proceso parte del análisis visual del bundle actual, identifica las causas del tamaño excesivo y propone soluciones concretas que se validan midiendo antes y después.
Medir el tamaño actual del bundle. Antes de optimizar, registrar el estado de partida como baseline:
Generar el mapa visual del bundle. Usar la herramienta correspondiente al bundler del proyecto:
webpack-bundle-analyzer genera un treemap interactivo del contenido del bundle.rollup-plugin-visualizer con formato treemap o sunburst.source-map-explorer analiza los source maps para mostrar qué ocupa espacio.Estas visualizaciones revelan de un vistazo qué dependencias y módulos dominan el tamaño.
Identificar los problemas habituales. Buscar estos patrones en el mapa visual:
lodash por subdependencias incompatibles).import _ from 'lodash' en lugar de import groupBy from 'lodash/groupBy').moment.js (300KB+) cuando date-fns o dayjs cubren el mismo caso de uso.Aplicar las soluciones. Para cada problema identificado, actuar con la técnica adecuada:
Tree-shaking: asegurar que las dependencias usan módulos ES (ESM). Verificar que el bundler no desactiva tree-shaking por configuración incorrecta de sideEffects en package.json.
Code splitting: dividir el bundle en chunks que se cargan bajo demanda. Rutas diferentes = chunks diferentes. Componentes pesados que no son visibles inicialmente = lazy loading con React.lazy(), defineAsyncComponent() o import() dinámico.
Lazy loading: cargar componentes, rutas y módulos solo cuando el usuario los necesita. Implementar Suspense o equivalente para gestionar el estado de carga.
Alternativas ligeras: sustituir dependencias pesadas por alternativas que cubran el caso de uso real:
| Librería pesada | Alternativa ligera | Reducción aproximada |
|---|---|---|
| moment.js | dayjs, date-fns | ~95% |
| lodash (completo) | lodash-es (cherry-pick) | ~80% |
| axios | fetch nativo + wrapper | ~100% (elimina dep) |
| numeral.js | Intl.NumberFormat | ~100% (nativo) |
Externalizar dependencias grandes: si una librería se usa en todas las páginas (React, Vue), servirla desde CDN o como chunk separado con caché larga.
Comprimir assets: configurar gzip o brotli en el servidor. Brotli ofrece entre un 15-25% mejor ratio que gzip.
Medir el resultado y comparar. Repetir las mediciones del paso 1 tras aplicar los cambios:
Establecer presupuesto de bundle. Para evitar que el tamaño vuelva a crecer sin control:
bundlesize, size-limit o la funcionalidad de presupuesto del bundler.module.exports dinámicas o efectos secundarios en la raíz del módulo pueden anular el tree-shaking.npx claudepluginhub 686f6c61/alfred-dev --plugin alfred-devGenerates bundle visualizations, analyzes chunk composition, enforces size budgets in CI, evaluates dependency cost before installing, and tracks bundle size over time.
Audits JavaScript bundle size to reduce parse/compile time and improve TTI. Covers tree-shaking, code-splitting, and budget enforcement with tools like webpack-bundle-analyzer.
Audits frontend bundle size and performance by analyzing build output, identifying heavy dependencies, and comparing against budget thresholds.