Lazy Loading en Angular (Ponlo a trabajar en tu sitio web)

Angular es un marco JavaScript de frontend desarrollado por Google para crear aplicaciones web escalables de nivel empresarial. Algunas de estas aplicaciones pueden llegar a ser bastante grandes, lo que afecta el tiempo de carga de su aplicación.

Para reducir el tiempo de carga y mejorar la experiencia general de sus usuarios, puede utilizar una técnica conocida como carga diferida. Esta característica nativa de Angular le permite cargar primero solo los bits requeridos de la aplicación web y luego cargar otros módulos según sea necesario.

En este artículo, aprenderá sobre la carga diferida y cómo puede ayudar a acelerar su aplicación web.

¿Qué es la carga diferida?

Lazy loading se refiere a la técnica de cargar elementos de la página web solo cuando son necesarios. Su contraparte es la carga ansiosa , cuando todo se carga, o intenta cargar, inmediatamente. Obtener todas las imágenes, videos, CSS y código JavaScript con entusiasmo puede significar largos tiempos de carga, malas noticias para los usuarios.

La carga diferida se usa a menudo para imágenes y videos en sitios que alojan una gran cantidad de contenido. En lugar de cargar todos los medios a la vez, lo que usaría mucho ancho de banda y atascaría las visitas a la página, esos elementos se cargan cuando su ubicación en la página está a punto de desplazarse para verse.

Angular es un marco de aplicación de una sola página que se basa en JavaScript para gran parte de su funcionalidad. La colección de JavaScript de su aplicación puede crecer fácilmente a medida que crece la aplicación, y esto viene con un aumento correspondiente en el uso de datos y el tiempo de carga. Para acelerar las cosas, puede usar la carga diferida para obtener primero los módulos requeridos y posponer la carga de otros módulos hasta que se necesiten.

Beneficios de Lazy Loading en Angular

La carga diferida ofrece beneficios que harán que su sitio sea más fácil de usar. Éstos incluyen:

• Tiempo de carga más rápido: JavaScript contiene instrucciones para mostrar su página y cargar sus datos. Debido a esto, es un recurso que bloquea el renderizado . Esto significa que el navegador tiene que esperar para cargar todo el JavaScript antes de mostrar su página. Cuando la carga diferida en Angular, el JavaScript se divide en fragmentos que se cargan por separado. El fragmento inicial contiene solo la lógica que se necesita para el módulo principal de la página. Se carga con entusiasmo, luego los módulos restantes se cargan con pereza. Al reducir el tamaño de la porción inicial, hará que el sitio se cargue y renderice más rápido.
• Menos uso de datos: al dividir los datos en partes y cargarlos según sea necesario, puede usar menos ancho de banda.
• Conservación de los recursos del navegador: dado que el navegador carga solo los fragmentos que se necesitan, no desperdicia memoria ni CPU tratando de interpretar y representar código que no se requiere.

Implementando Lazy Loading en Angular

Para seguir este tutorial, necesitará lo siguiente:

• NodeJS instalado
• Conocimientos básicos de Angular

Mejora tu proyecto

Usarás la CLI de Angular para crear tu proyecto. Puede instalar la CLI usando npm ejecutando el comando:

npm install -g @angular/cli

Después de eso, crea un proyecto llamado Lazy Loading Demo como este:

ng new lazy-loading-demo --routing

Ese comando crea un nuevo proyecto Angular, completo con enrutamiento. Trabajará exclusivamente en la carpeta src/app , que contiene el código de su aplicación. Esta carpeta contiene su archivo de enrutamiento principal, app-routing.module.ts . La estructura de la carpeta debería verse así:

Crear un módulo de funciones con rutas

A continuación, creará un módulo de funciones que se cargará lentamente. Para crear este módulo, ejecute este comando:

ng generate module blog --route blog --module app.module

Este comando crea un módulo llamado BlogModule , junto con el enrutamiento. Si abre src /app/app-routing.module.ts , verá que ahora se ve así:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

La parte que es importante para la carga diferida es la tercera línea:

 const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];

Esa línea define las rutas. La ruta para el blog usa el argumento loadChildren en lugar del component . El argumento loadChildren le dice a Angular que cargue la ruta de forma diferida, para importar dinámicamente el módulo solo cuando se visita la ruta y luego devolverlo al enrutador. El módulo define sus propias rutas secundarias, como blog/** , en su archivo routing.module.ts . El módulo de blog que generó se ve así:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { BlogComponent } from './blog.component'; const routes: Routes = [{ path: '', component: BlogComponent }]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class BlogRoutingModule { }

Notará que este archivo de enrutamiento contiene una sola ruta, '' . Esto se resuelve para /blog y apunta a BlogComponent. Puede agregar más componentes y definir esas rutas en este archivo.

Por ejemplo, si desea agregar un componente que obtenga detalles sobre una publicación de blog en particular, puede crear el componente con este comando:

ng generate component blog/detail

Eso genera el componente para el detalle del blog y lo agrega al módulo del blog. Para agregarle una ruta, simplemente puede agregarla a su matriz de rutas:

 const routes: Routes = [{ path: '', component: BlogComponent }, {path:"/:title",component: DetailComponent}];

Esto agrega una ruta que resuelve blog/:title (por ejemplo, blog/angular-tutorial ). Esta matriz de rutas tiene carga diferida y no está incluida en el paquete inicial.

Verificar carga diferida

Puede comprobar fácilmente que la carga diferida funciona ejecutando ng serve y observando el resultado. En la parte inferior de su salida, debería obtener algo como esto:

El resultado anterior se divide en dos partes: Los archivos de Initial Chunk Files son los archivos que se cargan cuando se carga la página por primera vez. Lazy Chunk Files tiene carga diferida. El módulo de blog se muestra en este ejemplo.

Comprobación de la carga diferida a través de los registros de red del navegador

Otra forma de confirmar la carga diferida es usar la pestaña Red en el panel Herramientas para desarrolladores de su navegador. (En Windows, eso es F12 en Chrome y Microsoft Edge, y Ctrl – Shift – I en Firefox. En una Mac, eso es Comando – Opción – I en Chrome, Firefox y Safari).

Seleccione el filtro JS para ver solo los archivos JavaScript cargados a través de la red. Después de la carga inicial de la aplicación, debería obtener algo como esto:

Cuando navegue a /blog , notará que se carga un nuevo fragmento, src_app_blog_blog_module_ts.js . Esto significa que su módulo se solicitó solo cuando navegó a esa ruta y se está cargando de forma lenta. El registro de la red debería verse así:

Carga perezosa vs carga ansiosa

A modo de comparación, también creemos un módulo cargado con entusiasmo y veamos cómo afecta el tamaño del archivo y el tiempo de carga. Para demostrar esto, creará un módulo para la autenticación. Es posible que deba cargar un módulo de este tipo con entusiasmo, ya que la autenticación es algo que puede requerir que todos los usuarios hagan.

Genere un AuthModule ejecutando este comando en la CLI:

ng generate module auth --routing --module app.module

Eso genera el módulo y un archivo de enrutamiento. También agrega el módulo al archivo app.module.ts . Sin embargo, a diferencia del comando que usamos para generar un módulo la última vez, este no agrega una ruta de carga diferida. Utiliza el parámetro --routing en lugar de --route <name> . Eso agrega el módulo de autenticación a la matriz de imports en app.module.ts :

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, AuthModule //added auth module ], providers: [], bootstrap: [AppComponent] })

Agregar AuthModule a su matriz de importaciones de AppModule significa que el módulo de autenticación se agrega a los archivos de fragmentos iniciales y se incluirá con el paquete principal de JavaScript. Para verificar esto, puede ejecutar ng serve nuevamente y observar el resultado:

Como puede ver, el módulo de autenticación no está incluido como parte de los archivos de fragmentos perezosos. Además, el tamaño del paquete inicial ha aumentado. El archivo main.js casi duplicó su tamaño, aumentando de 8 KB a 15 KB. En este ejemplo, el aumento es pequeño, ya que los componentes no contienen mucho código. Pero, a medida que llene los componentes con lógica, el tamaño de este archivo aumentará, lo que constituye un caso sólido para la carga diferida.

Resumen

Ha aprendido a usar la carga diferida en Angular para obtener módulos solo cuando son necesarios. La carga diferida es una excelente técnica para mejorar los tiempos de carga, reducir el uso de datos y utilizar mejor los recursos de frontend y backend.

La carga diferida, junto con tecnología como las redes de distribución de contenido y la minimización de JavaScript, mejorarán tanto el rendimiento de su sitio web como la satisfacción de sus usuarios.

Si está desarrollando un sitio de WordPress y realmente desea aumentar la velocidad, lea acerca de Kinsta Edge Caching para ver algunos números impresionantes.