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.
npx claudepluginhub 686f6c61/alfred-dev --plugin alfred-devThis skill uses the workspace's default tool permissions.
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.
Analyzes frontend bundle sizes for optimization in React, Vue, CSS projects. Provides guidance, configs, and best practices for auditing and reducing bundle sizes.
Visualizes JS bundle composition with webpack-bundle-analyzer/vite-bundle-visualizer, enforces CI size budgets via size-limit, evaluates deps with bundlephobia/package-size, explores source maps, tracks trends to prevent bloat.
Reduces JavaScript and CSS bundle sizes using code splitting, tree shaking, bundle analysis tools like webpack-bundle-analyzer. Improves web app load times and performance.
Share bugs, ideas, or general feedback.
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.