Angular 9 Estrategia de precarga: PreloadAllModules

William Bastidas
May 31 · 3 min read
Image for post
Image for post

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

Podemos utilizar el angular cli para generar nuestros modules:

ng generate module Modulo1 — routing

Preload All

Simplemente la actualización es la siguiente:

import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}

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

Conclusion:

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…

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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store