En angular por defecto existe un módulo inicial que se llama AppModule que inicialmente carga todos los módulos necesarios y todos los componentes de la aplicación.
Esto no es muy útil, porque a fin de cuentas los módulos de angular pueden ser fragmentos más pequeños sin necesidad de tener que cargar todos inicialmente aunque el usuario no los vaya a usar.
Por ejemplo, si nuestra aplicación tiene 80 componentes podemos cargar todos en un único módulo, sin embargo estaríamos rompiendo el principio de "divide y vencerás".
Así por poner un ejemplo, nuestra aplicación de 80 componentes quizás podría dividirse en 10 módulos de 8 componentes cada una, y esto supone varias ventajas, por un lado dividir los componentes en unidades que tienen una funcionalidad especifica y es más fácil de gestionar, y por otra parte, los módulos en Angular es el requisito indispensable para usar lo que se conoce como
"carga perezosa" o "lazy loading", que es lo que vamos a ver en esta entrada.
Con la carga perezosa nuestra aplicación no necesita cargar todo a la vez, sólo necesita cargar lo que el usuario espera ver cuando la aplicación se carga por primera vez. Los módulos que se cargan perezosamente sólo se cargarán cuando el usuario navega por sus rutas. Y esto lógicamente nos ayuda a reducir el tiempo de arranque de la aplicación.
Vamos a verlo con un ejemplo.
Supongamos una aplicación que tiene un menú con una serie de opciones (Clientes, proveedores y usuarios). Cada una de estas opciones cargará su módulo correspondiente, pero lo cargará únicamente cuando el usuario acceda a dicha opción.
El menú de la aplicación tendrá el siguiente aspecto:
Manos a la obra...
En primer lugar, vamos a crear el componente menu (menu.component) y los componentes de Clientes (cliente-list.component) y Proveedores (proveedores-list.component)
El componente se cargará desde el modulo principal, pero los componentes de clientes y proveedores se cargarán bajo demanda por "lazy loading".
El código del componente menú es el que vemos a continuación.
Es un menú creado con el framework css bulma, y realmente no hay nada especial que comentar.
Vamos a mostrar el código del componente cliente-list (el componente proveedor-list es muy similar así que no lo pondré en esta explicación, aunque si estará en el código fuente disponible)
El componente anterior es muy sencillo. Carga una serie de clientes, y finalmente muestra un botón para crear un nuevo cliente.
Hemos comentado anteriormente que la base para poder hacer "lazy loading" son los módulos, así que vamos a crear un módulo para Clientes. En realidad serán dos módulos, uno para los clientes (clientes.module.ts), y otro para gestionar las rutas de clientes (clientes-routing.module.ts)
clientes.module.ts
En este módulo de clientes importamos el clientes.routing.module que veremos a continuación y declaramos dos componentes el ClienteListComponent que teniamos creado anteriormente, y el NuevoClienteComponent.ts que crearemos posteriormente a modo de ejemplo.
Dentro del clientes-routing.module.ts es donde definiremos las rutas de clientes:
Las rutas que hemos definido son la principal, que cargará el componente ClienteList, y una para crear un nuevo cliente que cargará el:
nuevo-cliente.component.ts
Deberíamos hacer lo mismo para "Proveedores" y "Usuarios" pero por motivos de espacio no vamos a mostrarlo aquí (aunque si vendrá en el código fuente disponible)
A llegado la hora de hacer el lazy loading cuando el usuario haga click en la opción de menú "Clientes".
Para indicar que una ruta queremos cargarla de forma "perezosa" tenemos que indicarlo con este formato:
{
path: 'clientes',
loadChildren: './clientes/clientes.module#ClientesModule'
}
Si nos fijamos en la propiedad loadChildren, tenemos que espeficicar donde se encuentra la ruta física relativa del fichero clientes.module (sin extensión), junto con el símbolo # (almohadilla) y el nombre de la clase del módulo.
Luego en el fichero principal de rutas, declaramos las rutas, y especificamos cuales queremos que se carguen de forma "perezosa"
Cuando cargamos nuestra aplicación, inicialmente veremos que se cargan los siguientes ficheros (esto podemos comprobarlo si desde Chrome accedemos a las herramientas del desarrollador, pulsando F12, y desde ahí en la pestaña Network)
Los ficheros que se muestran anteriormente son los polyfills, styles, vendor, etc.
Sin embargo, cuando hacemos click en la opción de clientes nos aparece un nuevo fichero que se llama 0.chunck.js (el indice lógicamente puede variar)
Puedes descargar el código fuente del proyecto en:
https://github.com/jorgetrigueros/ng4-lazy-loading
Espero que esta entrada le sirva para saber que es el "lazy loading" y como podemos usarlo en nuestros proyectos.
Hasta la próxima entrada :-)
No hay comentarios:
Publicar un comentario