¿Cómo puede Lazy Loading mejorar el rendimiento de mi aplicación Angular?
¿Alguna vez has accedido a un sitio web que tardó mucho en cargar el contenido de la página? Si es así, no creo que estuvieras contento con eso. Como desarrolladores, queremos brindar la mejor experiencia posible a los usuarios. Por lo tanto, te mostraré cómo mejorar el rendimiento de tu aplicación Angular usando Lazy Loading.
Angular, de forma predeterminada, carga todos los archivos a la vez en la primera carga, un comportamiento llamado Eager Loading (“carga ansiosa”). De esta manera, tan pronto como se accede a la aplicación, ésta carga todos los módulos diseñados contenidos en el archivo del módulo principal, es decir, la aplicación completa, incluso si algunos componentes no se requieren de inmediato.
Por lo tanto, cuanto más grande sea la aplicación, más tiempo llevará descargar los archivos y mostrarlos en la pantalla. Debido a esto, el acceso por primera vez puede resultar en un tiempo de respuesta muy largo para los usuarios.
La espera de carga cobra aún más relevancia cuando pensamos en el acceso a través de aplicaciones móviles (tableta, celular) y conexiones lentas. Entonces, ¿cómo solucionar este problema? Ahí es donde lazy loading entra para ayudarnos.
En este artículo te mostraré:
- ¿Qué es lazy loading en angular?
- las ventajas de utilizar lazy loading;
- cómo implementar esta técnica en tu aplicación;
- cómo comprobar su funcionamiento.
¿Comenzamos?
¿Qué es lazy loading?
Lazy loading es una técnica recomendada por la guía de mejores prácticas en la documentación de Angular y se utiliza para mejorar el rendimiento de su aplicación, además de hacerla más organizada y escalable. Este es un patrón en el que los módulos se cargan según demanda, es decir, sólo cuando se solicitan y no necesariamente en el primer acceso.
¿Por qué utilizar lazy loading?
El uso de lazy loading en su aplicación tiene algunas ventajas importantes, como:
- carga inicial más rápida;
- estructura modularizada más organizada;
- mayor escalabilidad;
- código más limpio y, en consecuencia;
- mayor facilidad de mantenimiento.
Ahora que conocemos las principales ventajas de utilizar lazy loading , aprendamos cómo podemos implementarla en nuestro proyecto.
¿Cómo implementar lazy loading?
En lugar de importar todos sus módulos al módulo principal ( app.module.ts), crearemos otros módulos y los cargaremos a pedido. Creemos un módulo llamado book, usando el siguiente comando Angular CLI:
La opción --routing también creará el archivo de rutas del módulo generado. De manera similar, crearemos otro módulo, llamado users.
Si tiene preguntas sobre estos comandos, puedes obtener más información en este articulo Creando aplicaciones Angular con Angular CLI .
En el módulo book se crearon 4 componentes, que nos servirán de ejemplo para configurar nuestras rutas:
Y en el módulo users, se creó el componente Login:
Configurando nuestros archivos de ruta
Ahora, necesitamos configurar las rutas para nuestra aplicación.
- En el archivo de ruta principal,
AppRoutingModuletendremos la siguiente configuración de ruta:
En este archivo, para los dos módulos creados anteriormente, se utiliza lazy loading. Así, cuando accedamos a las rutas /book o /users , a través de la función loadChildren, se realizará la importación dinámica del módulo en cuestión, mediante una promesa .
Para comparar, veamos cómo se hace la configuración para cargar el HomeComponent, cuando el path está vacío. En este caso, la carga es “ansiosa” (Eager Loading).
Ahora necesitamos configurar los archivos de enrutamiento de los módulos que creamos, ya que ellos son responsables de definir sus propias rutas.
- En el archivo de ruta del módulo
book,BookRoutingModuletendremos la siguiente configuración de ruta:
Nuestras rutas de la aplicación quedaron así:
/book para cargar BookReadComponent;
/book/create para cargar BookCreateComponent;
/book/update para cargar BookUpdateComponent;
/book/delete para cargar BookDeleteComponent
- En el archivo de rutas del módulo
users,UsersRoutingModuletendremos la siguiente configuración de rutas:
Aquí, cuando accedemos a http://localhost:4200/usuarios, se cargará el
LoginComponent(el puerto puede variar según su configuración).
También debemos prestar atención al hecho de que en AppRoutingModule, usamos imports de RouterModule.forRoot(routes)para especificar que este es el módulo de enrutamiento raíz.
Y en los módulos secundarios, se agrega RouterModule.forChild(routes).
forRoot()se debe utilizar una sola vez en la aplicación, yaforChild()se puede utilizar en varios módulos.
En cuanto a la implementación, es importante tener cuidado de eliminar la importación de módulos que se están cargando bajo demanda, del archivo app.module.ts, si previamente fueron importados allí, de lo contrario se seguirán cargando de forma preliminar.
Comprobación de funcionamiento
Al ejecutar la aplicación con el comando ng serve, podemos ver que, antes de usar lazy loading, Angular cargó todo de una vez ( Initial Chunk Files ). Ahora, la aplicación se divide en varios fragmentos ('chunks') y sólo se cargarán cuando sea necesario. Por tanto, el tamaño inicial del paquete cargado es menor y, en consecuencia, el tiempo de carga es menor.
Antes:
Después:
Conclusión
En este artículo, entendemos la importancia de lazy loading en Angular y aprendemos cómo implementar esta técnica para mejorar el rendimiento de nuestra aplicación.
¿Quieres aprender más sobre Front-end y Angular? Vea nuestras capacitaciones:
Obtenga más información sobre las promesas:
Este articulo fue traducido y adaptado por Daysibel Cotiz.