Angular 9 Estrategia de precarga: PreloadAllModules

William Bastidas
May 31, 2020 · 3 min read

Hoy en día se requieren aplicaciones rápidas. Existen múltiples técnicas y estrategias para crear aplicaciones rápidas, una de ellas es cargar los paquetes JavaScript de la aplicación en los navegadores de los usuarios lo más rápido posible. En Angular 9, hay muchas formas de hacerlo.

Cuando construimos una aplicación en Angular esta aplicación esta compuesta por un montón de componentes , servicios directivas...

Esto no es un problema para una aplicación pequeña o mediana pero a medida que la aplicación crece se convierte en algo importante ya que hay que cargar en el navegador mucho código de JavaScript de golpe y los tiempos de carga se pueden ver afectados.

Podemos indicarle a Angular que precargue los módulos. Incluso podemos especificar cuales de ellos queremos precargar.

En esta publicación veremos cómo utilizar la precarga integrada en Angular 9 PreloadAllModules.

Angular Lazy Loading Modules

Primero necesitamos organizar nuestros componentes y servicios en módulos de forma que estos se puedan cargar en un futuro y no en el momento de arranque de la aplicación.

Podemos utilizar el angular cli para generar nuestros modules:

Preload All

Por defecto, Angular no precarga ningún paquete, pero esto podemos cambiarlo siempre que hayamos configurado el enrutador en nuestro proyecto en el archivo src/app/app-routing.module.ts

Simplemente la actualización es la siguiente:

Lo único que necesitamos proporcionar un objeto de opciones en preloadingStrategy forRoot().

Conclusion:

Cuando es necesario aumentar el rendimiento de una aplicación Angular, podemos utilizar la división de código a nivel de ruta:

Primero debemos elegir la estrategia de precarga adecuada según el tamaño de nuestra aplicación:

  • Si la aplicación tiene solo unos pocos módulos, podemos usar la estrategia integrada de Angular PreloadAllModules.
  • Si la aplicación tiene muchos módulos, tenemos la opción de usar una estrategia de precarga personalizada como el enlace rápido de Angular, o la precarga predictiva, como implementa en Guess.js. (Que cubriremos en otra publicación)

Finalmente, debemos configurar la estrategia de precarga mediante de la propiedad preloadStrategy del enrutador angular.

Mas información:

Te ha gustado el Post? o crees que hay algo pueda mejorar? no dudes en dejarlo en los comentarios!. Puedes estar en contacto conmigo en mis cuentas de Twitter, facebook y LinkedIn.☺

¡Compártelo!

Siéntete libre de compartir 😄 Y recuerda que puedes aplaudir más de una vez!

williambastidasblog

Always in Learning mode…

williambastidasblog

Mi cuardeno de anotaciones, donde intento compartir experiencias de desarrollo, experimentos e interactuar con la comunidad.

William Bastidas

Written by

Developer | Web | Mobile | Ionic | TypeScript | JavaScript | Angular | UI | UX | Git | Html | CSS | Agile | Frontend | PWA. Always in Learning mode…

williambastidasblog

Mi cuardeno de anotaciones, donde intento compartir experiencias de desarrollo, experimentos e interactuar con la comunidad.