Menu

¿Cómo usar webpack-bundle-analyzer en Angular?

angularnewsionicbundlebundlephobiarendimientowebpack - September 21, 2018 por Nicolas Molina

Existen muchas librerías que cotidianamente usamos y con webpack-bundle-analyzer puedes generar un reporte interactivo para analizar el tamaño de la aplicación.

Cada librería que le agregamos a la aplicación tiene un costo en bytes y esto debe ser tomado en cuenta ya que entre más peso tenga la aplicación puede llegar a tardar en cargar un poco más. Con el paquete de webpack-bundle-analyzer se puede generar un reporte de este tipo para aplicaciones Angular:

El primer paso para generar el reporte anterior será instalar el paquete dentro de nuestra aplicación Angular con le siguiente comando:

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

Una vez que ya temenos instalado el paquete solo debemos generar una aplicación para producción con Angular CLI, de esta manera:

ng build --prod --stats-json

La bandera –stats-json que le agregamos al comando hace que Angular CLI nos genere un archivo llamado stats.json con todo el peso de la aplicación segmentado por módulos y paquetes que se usan dentro de la aplicación.

Comúnmente cuando construimos una aplicación para producción, Angular CLI ya nos arroja estadísticas básicas del peso de la aplicación de esta manera:

Pero ahora con webpack-bundle-analyzer instalado podemos generar un reporte más preciso e interactivo, ejecutando el siguiente comando:

npx webpack-bundle-analyzer dist/name_folder_your_app/stats.json

Y luego simplemente nos arrojará el reporte donde segmenta, el peso de la aplicación por módulos y paquetes, como lo muestra la siguiente imagen:

En una herramienta muy útil para analizar el peso de las aplicaciones, en el siguiente video explico a más detalle acerca de esta herramienta.

¡Compártelo!