Cómo optimizar el tamaño de tu aplicación Angular
El tamaño de los archivos que viajan desde el servidor web hacia los navegadores es un asunto clave a resolver si se quiere entregar una buena experiencia a los usuarios que usan en tu aplicación. Para crear aplicaciones web / pwa los desarrolladores utilizan frameworks que facilitan la implementación de dichas aplicaciones, e inyectan productividad dentro del ciclo de desarrollo de software (SDLC). Sin embargo, a medida que nuestra aplicación crece en funcionalidades, los archivos auto-generados por estos frameworks incrementan su tamaño y hacen que los usuarios finales tengan que esperar más tiempo para poder interactuar con la aplicación. Incluso, se podrían generar errores funcionales con consecuencias no deseadas para el negocio soportado por nuestra aplicación. Los archivos de gran tamaño son una de las principales causas para que los usuarios finales tengan una mala experiencia en la interacción con nuestras aplicaciones.
Siempre que se habla de programación en el front, Angular aparece dentro del top 3 de los lenguajes/frameworks más usados. Por esto es muy importante entender cómo optimizar el tamaño de los bundle (archivos generados por Angular para ser desplegados en ambientes productivos). A continuación queremos describir un proceso muy simple que nos ayudará a tener archivos de menor tamaño, y por consiguiente, brindar una mejor experiencia a los usuarios finales.
Analizar el bundle
Lo primero es encontrar en qué parte de nuestro bundle están los grandes tamaños. Para esto, nos podemos apoyar en el paquete webpack-bundle-analyzer que es ideal para ese fin. A partir del análisis generado, se pueden tomar las acciones necesarias para mejorar la estrategia de empaquetado de Angular.
A continuación una pequeña guía de cómo instalar webpack-bundle-analyzer:
- Ejecutar
npm install -g webpack-bundle-analyzer - En la carpeta correspondiente a la aplicación Angular, ejecutar:
ng build --stats-json. Cómo resultado se generará el archivostats.json. - Ejecute el comando
webpack-bundle-analyzer stats.json. Esto iniciará un webserver en http://localhost:8888 en el cuál encontrarás información valiosa respecto al tamaño del bundle. Allí se reflejarán los módulos que incrementan su tamaño.
Optimizar el bundle
A continuación algunas de las estrategias que podrían ayudar a mejorar el tamaño del bundle de Angular:
Modificar imports
Una estrategia es sacar provecho de ES6 y modificar los imports así:
En lugar de la Forma 1: import { last } from 'lodash'
Importar de la Forma 2: import last from 'lodash/last'
La Forma 1 incluye toda la librería lodash. La Forma 2 incluye solo el código de la función last de la misma librería.
Eliminar paquetes/librerías no usados
Muchas veces, mientras se evoluciona la aplicación, se prueba instalando diferentes librerías desde repositorios como npm, y al final, cuando decidimos cuál será la librería que usaremos para nuestra implementación, olvidamos desinstalar las previas con las que hicimos pruebas.
Adicionar compresión (gzip)
Los archivos comprimidos con gzip (gzip files) pueden disminuir su tamaño hasta un 80% del tamaño original. Para verificar si el tus archivos se están transmitiendo de forma comprimida, puedes usar las herramientas de desarrollador de Google Chrome, ingresar a tu aplicación, seleccionar el tab Network, allí seleccionar un archivo tipo script y mirar la sección Response Headers.
Si este encabezado no está presente, el navegador cargará el archivo con el tamaño original.
¿Cómo adicionar compresión gzip a los archivos de mi aplicación?
Pues bien, los archivos están en un CDN esta pregunta ya está resuelta. Pero si los archivos son enviados desde nuestro propio servidor (Ejm: NodeJS con Express) debemos adicionar esta característica. Diferentes servidores tienen diferentes formas de activar la compresión. El siguiente ejemplo muestra como hacerlo en un aplicación NodeJS con Express.
const compression = require('compression');
const express = require('express');
const app = express();
app.use(compression());
Incluir Lazy Loading
Lazy loading es una característica de Angular que permite que un archivo bundle de tamaño grande sea distribuido en varios archivos de menor tamaño. Puedes encontrar una guía de cómo implementar Lazy Loading en el sitio oficial de Angular Lazy Loading ngmodules.