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.