Repolode
Enviar
webpack

webpack/webpack-bundle-analyzer

Plugin de webpack y CLI que muestra el contenido de los bundles en un treemap interactivo con zoom para identificar qué módulos ocupan más espacio.

Ver en GitHub
Estrellas
12,652
Forks
517
Issues abiertos
24
Último commit
ayer

¿Qué es?

Webpack Bundle Analyzer ayuda a los desarrolladores a ver qué hay realmente dentro de la salida de webpack. Representa cada bundle como un treemap interactivo con zoom, donde cada rectángulo representa un módulo, para que sea fácil detectar cuáles contribuyen más al tamaño del bundle. Es útil para encontrar módulos incluidos por error y decidir qué optimizar.

Se puede ejecutar como plugin de webpack, que de forma predeterminada inicia un servidor HTTP local para mostrar el informe, o generar un informe HTML estático o un archivo JSON. También se puede usar como CLI con un archivo JSON de estadísticas de webpack existente. Admite bundles minificados: la herramienta los analiza para estimar el tamaño real de cada módulo incluido y muestra los tamaños stat, parsed, gzip, Brotli y Zstandard.

El plugin ofrece opciones para configurar el host y el puerto del servidor, el nombre de archivo y el título del informe, el tipo de tamaño predeterminado, el algoritmo de compresión y los assets que se deben excluir. Los chunks se pueden filtrar desde una barra lateral o desde un menú contextual dentro del informe.

Funciones clave

  • 01Treemap interactivo con zoom de los módulos del bundle
  • 02Funciona como plugin de webpack o como CLI independiente con archivos de estadísticas
  • 03Analiza bundles minificados para mostrar el tamaño real de los módulos
  • 04Muestra los tamaños stat, parsed, gzip, Brotli y Zstandard
  • 05Genera un servidor HTTP, un informe HTML estático o un archivo JSON
  • 06Permite filtrar chunks desde una barra lateral o un menú contextual

Casos de uso

  • Encontrar dependencias grandes o incluidas por error en un proyecto de webpack
  • Seguir los cambios en el tamaño del bundle durante las optimizaciones
  • Analizar un bundle a partir de un archivo stats.json existente en CI o en un servidor
  • Generar un informe estático del bundle para compartirlo con el equipo

Inicio rápido

  1. 1

    Instala el complemento como dependencia de desarrollo con npm

    npm install --save-dev webpack-bundle-analyzer
  2. 2

    Añade BundleAnalyzerPlugin al array plugins de la configuración de webpack y ejecuta webpack

Antes de usarlo

  • Solo analiza bundles de webpack, por lo que no sirve para la salida de otros bundlers.

En colecciones

Diagramas, gráficos y visualizaciones animadas

Temas

#webpack#bundle-size#treemap#visualization#javascript#build-tool#analyze#bundle#chart#interactive

Preguntas frecuentes

¿Qué es webpack-bundle-analyzer?
Plugin de webpack y CLI que muestra el contenido de los bundles en un treemap interactivo con zoom para identificar qué módulos ocupan más espacio. Webpack Bundle Analyzer ayuda a los desarrolladores a ver qué hay realmente dentro de la salida de webpack. Representa cada bundle como un treemap interactivo con zoom, donde cada rectángulo representa un módulo, para que sea fácil detectar cuáles contribuyen más al tamaño del bundle. Es útil para encontrar módulos incluidos por error y decidir qué optimizar.
¿webpack-bundle-analyzer es gratuito? ¿Qué licencia tiene?
webpack-bundle-analyzer es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿webpack-bundle-analyzer sigue mantenido?
Mantenimiento activo. El último commit de webpack-bundle-analyzer fue el 6 nov 2026.
¿Para qué puedo usar webpack-bundle-analyzer?
Encontrar dependencias grandes o incluidas por error en un proyecto de webpack Seguir los cambios en el tamaño del bundle durante las optimizaciones Analizar un bundle a partir de un archivo stats.json existente en CI o en un servidor Generar un informe estático del bundle para compartirlo con el equipo
¿Cómo se instala webpack-bundle-analyzer?
Instala el complemento como dependencia de desarrollo con npm: npm install --save-dev webpack-bundle-analyzer Añade BundleAnalyzerPlugin al array plugins de la configuración de webpack y ejecuta webpack
¿Dónde consigo webpack-bundle-analyzer?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/webpack/webpack-bundle-analyzer

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados