Una de las principales ventajas que ofrece una aplicación SPA es intentar trasmitir al usuario una experiencia lo más parecida a una aplicación de escritorio desde el mundo web, eliminando retardos en la navegación intra-páginas y evitando la recarga de estas a cada envío de datos al servidor. La app corre por completo en el navegador del usuario.
Estas aplicaciones, y en el caso tratado de Angular de la misma forma, generan un “paquete” JavaScript con todo el contenido de la web en un archivo, tanto el HTML de las vistas como el código JavaScript con su lógica, y este fichero puede crecer de forma alarmante. Normalmente en la de creación del paquete de despliegue se le aplica un proceso de minificado (minify) y de transcripción del código (uglify), de tal manera que reducimos el tamaño del fichero JavaScript, pero, incluso así, el tamaño del fichero puede ser demasiado grande, haciendo que la carga inicial de la aplicación penalice la experiencia de usuario. Angular aplica otras técnicas para reducir aún más el tamaño de paquete, como por ejemplo Tree-shaking, pero aun asi, sigue siendo insuficiente.
Para solucionar esto, Angular permite la división de las distintas unidades de negocio que pueden componer la aplicación en Módulos y mediante el motor de routing interno permite la carga de cada uno de estos módulos por separado. De esta manera reducimos el tamaño inicial del paquete, y a su vez reducimos el tiempo de carga de la aplicación. Esto es lo que se denomina lazy-loading o carga perezosa: cargamos el módulo en el momento que lo necesitamos.
Veamos un ejemplo en la definición del módulo de routing de una aplicación Angular, en los que aplicamos lazy-loading para la carga de los módulos de Admin y Usuarios:
Lo primero a resaltar es que, al definir el módulo de routing, le estamos aplicando una estrategia de carga de los módulos, en este caso le estamos diciendo, que tras arrancar la app solicite los distintos módulos que componen la aplicación en background, aplicamos una estrategia de PreloadAllModules. de esta manera reducimos el tiempo de acceso a las páginas que componen esos módulos ya que se han cargado sin penalización para el usuario. Pero también podríamos haberle dicho que no hiciera precarga y estos fueran solicitados bajo demanda. Para solicitar los módulos bajo demanda, aplicamos una estrategia de NoPreloading
Lo segundo que vemos, es que estamos definiendo un path para cada uno de los módulos, e indicamos la ruta del módulo y nombre del módulo que define los esa funcionalidad:
Por otro lado, el routing de cada uno de los módulos tiene definir las rutas mediante el método de inicialización forChild. Podemos ver un ejemplo de cómo quedaría el routing para el módulo de usuarios propuesto en el ejemplo anterior:
De esta manera, podremos dividir nuestra app Angular en pequeñas piezas que se cargan en background y de forma transparente para el usuario y mejorando el tiempo de carga.
