Saltar al contenido

Analizador de estadísticas webpack

Descubre qué paquetes y módulos ocupan más espacio en tu compilación webpack.

Entrada

Analizador de estadísticas webpack

Genera un archivo stats.json desde webpack (`webpack --json > stats.json`, o con `stats: { modules: true }` en tu configuración) y pégalo aquí para ver exactamente qué paquetes y módulos están inflando tu compilación. Esta es la forma más rápida de responder "por qué mi compilación es tan grande" sin instalar un plugin bundle-analyzer o recompilar con flags especiales — el reporte lee el JSON que ya tienes.

Agrupa el reporte por paquete node_modules para ver qué dependencia cuesta más, por carpeta para ver qué parte de tu propio árbol de código fuente es más pesada, o déjalo sin agrupar para inspeccionar módulos individuales uno por uno. La opción de filas a mostrar limita un reporte largo a los mayores infractores; el porcentaje del total pone el tamaño de cada fila en contexto contra el total; y si tu stats.json incluye un campo de tamaño comprimido por módulo (gzipSize o sizeGzip), activar la columna de tamaño comprimido muestra ambos números lado a lado. Filtrar por un punto de entrada o nombre de chunk limita todo a un paquete, lo cual es útil una vez que una aplicación tiene más de un archivo de salida.

La herramienta también marca paquetes que aparecen en más de una ruta de instalación node_modules — una señal común de que dos dependencias fijan versiones incompatibles de la misma librería y webpack termina incluyendo ambas copias. Esas filas se marcan en la salida para que sean fáciles de detectar incluso en un reporte largo. Elige salida de tabla para un reporte legible o CSV para pegar en una hoja de cálculo cuando estés monitoreando el tamaño del paquete a lo largo del tiempo.

Todo corre en tu navegador: el stats.json se analiza localmente y nunca se carga a ningún lado, así que es seguro usar con código propietario. Copia el resultado, descárgalo como archivo .txt, o envíalo directamente a la entrada de otra herramienta para seguir trabajando.

Preguntas frecuentes

¿Cómo genero un stats.json?
Ejecuta tu compilación webpack con `webpack --json > stats.json`, o agrega `stats: { modules: true }` a tu configuración webpack para que el compilador imprima datos de módulos. La herramienta necesita un array de nivel superior "modules" para funcionar.
¿Qué muestra agrupar por paquete que no muestre agrupar por carpeta?
Agrupar por paquete collapsa todos los archivos bajo node_modules/react (por ejemplo) en una fila, para que veas la huella total de una dependencia. Agrupar por carpeta en su lugar reporta tus propios directorios de código fuente, lo cual es más útil para encontrar una característica de gran tamaño en tu propio código.
¿Por qué advierte sobre paquetes "duplicados"?
Cuando dos dependencias cada una requiere una versión diferente de la misma librería, npm o yarn pueden anidar una segunda copia dentro de node_modules en lugar de deduplicarla. Esta herramienta detecta un nombre de paquete que aparece en más de una ruta de instalación y lo marca, ya que eliminar el duplicado es frecuentemente una forma fácil de reducir un paquete.
¿Muestra tamaños reales de gzip si mi stats.json no los incluye?
No. El tamaño comprimido solo se muestra cuando tu stats.json ya incluye un campo gzipSize o sizeGzip por módulo — la herramienta nunca comprime nada por sí misma, ya que eso significaría re-ejecutar un paso de compilación. Sin ese campo, la columna de tamaño comprimido muestra un guion.
¿Se carga mi stats.json a algún lado?
No. El análisis y la compilación del reporte ocurren completamente en tu navegador — el archivo nunca sale de tu dispositivo.