Visualizador del tamaño del bundle de Webpack

• Visualización instantánea del bundle de Webpack: visualiza el tamaño del bundle de webpack al instante en tu navegador, sin subidas a servidores ni herramientas de compilación. Nuestro visualizador del tamaño del bundle de webpack analiza tu JSON de estadísticas y genera barras de tamaño interactivas para paquetes, módulos y chunks.
• Visualizador del tamaño del bundle de Webpack online seguro: tu JSON de estadísticas de webpack nunca sale de tu dispositivo al usar este visualizador. El procesamiento 100 % en el lado del cliente supone una privacidad total: sin almacenamiento en la nube, sin registros del servidor y sin exponer el código fuente.
• Visualizador del tamaño del bundle de Webpack sin instalación: visualiza el tamaño del bundle de webpack directamente en tu navegador sin paquetes npm, sin configurar webpack-bundle-analyzer y sin cuenta. Este visualizador del tamaño del bundle de webpack gratis funciona en cualquier navegador moderno.
• Recomendaciones de optimización y análisis de paquetes: obtén recomendaciones prácticas de optimización para tus dependencias principales (moment.js, lodash, d3, MUI, chart.js y muchas más). Consulta la composición del bundle (node_modules frente a código de la app) y la contribución de tamaño de cada paquete.

• Cumplimiento del presupuesto de tamaño del bundle: usa el visualizador del tamaño del bundle de webpack para comprobar si tu bundle cabe en tu presupuesto de rendimiento antes de cada despliegue. Descubre qué paquetes son los mayores contribuyentes y detecta regresiones a tiempo.
• Auditoría y sustitución de dependencias: usa el visualizador del tamaño del bundle de webpack para identificar dependencias sobredimensionadas como moment.js (290 KB) o lodash (71 KB). El panel de recomendaciones de optimización propone alternativas más ligeras para los infractores más habituales.
• Verificación del tree-shaking: usa el visualizador del tamaño del bundle de webpack para comprobar que el tree-shaking funciona correctamente. Si un paquete muestra muchos módulos pequeños en lugar de un único bundle grande, el tree-shaking está activo y funcionando como se espera.
• Optimización de Core Web Vitals: usa el visualizador del tamaño del bundle de webpack para identificar los bundles de JavaScript más grandes que afectan a tus puntuaciones de LCP y FID. Reducir el tamaño del bundle principal mejora directamente el Time to Interactive y el First Input Delay.
• Informes de rendimiento para clientes: usa el visualizador del tamaño del bundle de webpack para generar datos de composición del bundle destinados a informes de rendimiento de clientes. Muestra la división entre node_modules y código de la app, los principales paquetes por tamaño y oportunidades de optimización concretas.
• Análisis de la división de código: usa el visualizador del tamaño del bundle de webpack para analizar los tamaños de los chunks e identificar oportunidades de división de código. La vista de chunk muestra qué chunks son los más grandes y cuántos módulos contiene cada uno.

Un visualizador del tamaño del bundle de webpack analiza la salida JSON de la API de estadísticas de webpack y presenta un desglose visual de qué módulos y paquetes contribuyen más al tamaño de tu bundle. Nuestro visualizador del tamaño del bundle de webpack lee los arrays modules, chunks y assets del JSON de estadísticas de webpack y agrega los tamaños de módulo por nombre de paquete, mostrándote exactamente qué dependencias de node_modules son las más grandes. Todo el análisis se ejecuta íntegramente en tu navegador con JavaScript puro, sin subir nada a un servidor y sin necesidad de instalar webpack-bundle-analyzer.

1. 1 Genera tu JSON de estadísticas de webpack: ejecuta webpack --json > stats.json o next build --debug. Después pega el contenido de stats.json en el área de entrada o sube el archivo directamente.
2. 2 Análisis instantáneo en el navegador: haz clic en «Visualizar bundle» y el visualizador del tamaño del bundle de webpack analiza el JSON, agrega los tamaños de módulo por nombre de paquete y genera barras de tamaño para paquetes, módulos y chunks. No se envía ningún dato a ningún servidor.
3. 3 Revisa la visualización y las recomendaciones: cambia entre las vistas de paquete, módulo y chunk. El panel de recomendaciones de optimización ofrece sugerencias concretas para las dependencias más grandes de tu bundle.

• Composición del bundle: una barra visual que muestra el reparto entre node_modules (dependencias de terceros) y código de la app; la mayoría de los bundles son un 70-90 % node_modules, que es el principal objetivo de optimización.
• Vista de paquete: todos los paquetes de node_modules agregados por nombre y ordenados por tamaño total; muestra qué dependencias contribuyen más a tu bundle.
• Vista de módulo: los 20 módulos individuales más grandes por tamaño; útil para identificar archivos concretos que son inesperadamente grandes.
• Vista de chunk: todos los chunks de webpack ordenados por tamaño; útil para identificar oportunidades de división de código y entender la estructura de tu bundle.

Para webpack: ejecuta webpack --json > stats.json o añade {" "} a tu configuración de webpack. Para Next.js: ejecuta next build --debug y busca el archivo de estadísticas en .next/. Para Create React App: usa source-map-explorer o eject para acceder a la configuración de webpack. El visualizador del tamaño del bundle de webpack acepta cualquier JSON de estadísticas de webpack; el formato es consistente entre webpack 4 y webpack 5.