• slidebg1

Angular2 y Lazyloading


Una característica a destacar que ofrece angular2 es lazyloading, pero, ¿Qué es el lazyloading? Y más importante, ¿Lo necesito en mi proyecto? y si es así ¿Como lo configuro? Estas 3 preguntas son las que vamos a tratar en este post. 

 

¿Qué es lazyloading?

Se conoce como “Carga diferida” y responde a un patrón de diseño basado en retrasar la carga o inicialización de un objeto. Aplicando este concepto a nuestro proyecto angular surge la siguiente estructura: Un proyecto separado en módulos (ej: app.module.ts) en los cuales se van a definir, entre otras cosas, las siguientes partes:

  • Los componentes que vamos a utilizar (declarations)
  • Los módulos de los cuales voy a usar componentes (imports)
  • Los servicios que voy a necesitar (providers)
  • ... 

 

Bien, teniendo esto claro, ya sabemos que un módulo es un paquete que tiene toda una funcionalidad definida. Siguiendo esta línea, habría que separar la funcionalidad de un proyecto en pequeñas partes, por ejemplo:

Módulo Usuario Administrador

  • Módulo Estadísticas
  • Módulo Común
  • Componente Usuario
  • Componente Métricas
  • ...

Módulo Usuario Cliente

  • Módulo Común
  • Componente Amigos
  • Componente Fotos
  • Componente Mi Muro
  • ...

Módulo Estadísticas

  • Componente Gráficas De Estado
  • Componente Gráficas De Búsqueda
  • Componente Gráficas De Tiempo Activo
  • ... 

Módulo Común

  • Componente Navegación
  • Componente Login

 

Una parte importante del ejemplo anterior es que un módulo puede contener a su vez otros módulos. Respecto a lo demás, ya nos vamos dando cuenta de que la siguiente estructura la tenemos que pensar desde el principio del proyecto, ya que implica una forma de organizar nuestro código muy concreta. 

Sabiendo esto, parece que la idea del lazyloading ya va siendo más clara ¿Cierto?, solo se van a cargar los módulos necesarios en el momento en el que los necesitamos, es decir:

Si entro como usuario administrador se cargarán solo los componentes del módulo administrador, no se cargarán los componentes del usuario ni los componentes de las estadísticas, sólo los componentes del usuario administrador.

Si como administrador entro a estadísticas se cargarán todos los componentes del módulo estadísticas.

Así de simple, esto libera al proyecto web de hacer una carga de todos los archivos al inicio, lo que nos va a dar más sensación de fluidez que si cargamos todo al principio. Sin embargo, esto que hemos hablando nos lleva a la siguiente pregunta.

 

¿Lo necesito en mi proyecto?

Aquí solo cabe ser coherente con el proyecto que tiene uno delante, el lazyloading se empieza a notar cuando el volumen del proyecto es grande, sin embargo, no es problemático en proyectos pequeños. Para responder esta pregunta te tienes que hacer las siguientes preguntas

¿Mi proyecto tiene expectativas de ser grande?

  • Si quieres un proyecto grande y estable, incorpora lazyloading, sin ninguna duda, ni te lo pienses.

Mi proyecto no va a ser grande de momento ¿Me hace falta?

  • Ten en cuenta lo siguiente, si en un futuro el proyecto es grande y queremos que siga siendo estable hay que incorporar lazyloading y no va a ser nada fácil reestructurar el código para separarlo en módulos, en algunos casos inviable.

¿Tengo el tiempo para configurar y una estructura separada en módulos?

  • La realidad es que no conlleva mucho tiempo si se empieza desde el principio con ella, configurar la carga diferida de módulos no es una gran complicación ni interfiere en el trabajo.

 

¿Cómo lo configuro?

Espero que llegados a este punto te hayas convencido de que incorporar lazyloading es una buena idea y que ya estés pensando en aprender a cómo incorporarlo en tu proyecto. En esta parte vamos a ver como configurar un proyecto para que haga la carga de módulos en diferido.

Lo primero es generar tantos módulos, mediante el comando ng generate module $module-name, como las partes que identifiques en tu proyecto, para esta demo vamos a utilizar la siguiente estructura de módulos: 

  • App
  • Admin
  • Stats
  • Client
  • CommonComponents

Con las siguiente jerarquía de carga:

AppModule

  • Import - CommonComponentsModule
  • Lazyload - AdminModule
  • Lazyload - ClientModule 

AdminModule

  • Import - CommonComponentsModule
  • Lazyload - StatsModule

ClientModule

  • Import - CommonComponentsModule

 

Bien ¿Esto cómo lo representamos en nuestro proyecto? Lo primero es ir al módulo más alto, en este caso AppModule y debería quedar de la siguiente forma:

 

 

Bueno, como se ve en el ejemplo anterior, la configuración del lazyloading se realiza mediante la configuración de rutas haciendo referencia al módulo mediante la propiedad ‘loadChildren’. De esta forma ya estamos delegando en los módulos Admin y Client la gestión de componentes, es decir, los módulos delegados ya se ocuparan de gestionar sus propios componentes y sus rutas.

Ahora vayamos a AdminModule, nuestro siguiente módulo dentro de esta jerarquía, veamos como queda

 

 

Como podemos comprobar, las configuraciones son muy similares a las que hemos hecho en AppModule, cargamos los componentes que necesitamos y delegamos los módulos que queremos cargar de manera lazy ¿Sin complicación hasta ahora no? 

Bien, hasta aquí la configuración de módulos y ahora solo queda pasar a… ¡desarrollar nuestro proyecto, lazyloading no tiene más configuraciones! Estupendo ¿No? Bueno, solo nos falta una cosa, una cosa ¿Cómo sabemos si un módulo se está cargando de manera lazy? Muy sencillo 

La comprobación se haría de la siguiente forma, nos vamos al navegador, estando en la página principal abrimos el inspector de elementos y una vez allí nos dirigimos a la tercera pestaña, ‘Sources’, deberíamos tener algo como esto:

 

Si ahora nos dirigimos, por ejemplo, a admin observaremos el siguiente cambio: 

 

 

Como se puede observar, se ha añadido un nuevo fichero llamado admin.module.chunk.js que contiene todos los componentes, servicios, … definidos en el módulo admin, por separado, no se ha cargado hasta que no hemos navegado hasta esa ruta. Si cambiaramos de ruta por ejemplo a client, tendríamos un nuevo fichero llamado client.module.chunk.js con los contenidos definidos en dicho módulo.

Como conclusión, una excelente forma de segmentar un proyecto y controlar la carga

 

 

Públicado el 18/01/2018

Comparte este post: