Como optimizar el tamaño del bundle de Angular



Cuando compilas un proyecto de Angular para publicarlo en la web generas una serie de ficheros de distribución, el tamaño de estos ficheros varía dependiendo de las librerías que importemos en el proyecto y del código que queramos ejecutar.

Cuando compilo un proyecto estos son los pasos que doy para optimizarlo:
  1. Conocer el tamaño de tu Bundle: Cuando compilas con ng build --prod te muestra el listado de ficheros con el mismo tamaño.
  2. Comprueba que el servidor sirva ficheros con la compresión gzip activada, te reduce el tamaño del Bundle en un 80%.
  3. Analiza la composición de tu Bundle: Con webpack-bundle-analyzer puedes analizar de manera visual los elementos que componen estos ficheros para detectar que elementos tienes que optimizar para adelgazarlo.
  4. Configura en angular.json el tamaño máximo de generación y el tamaño mínimo de advertencia.
Optimizar un Bundle lleva su tiempo, pero es un paso imprescindible para publicar un proyecto en angular

Comentarios