¿Cómo elegir qué paquete angular precargar?

La estrategia de carga en angular decide cómo cargar los módulos de la aplicación cuando la aplicación se ejecuta en el navegador. En Angular, tenemos tres tipos de carga: carga ansiosa, carga diferida y precarga. De forma predeterminada, Angular sigue la carga ansiosa, es decir, tan pronto como la aplicación comienza a descargarse en el navegador, los módulos comienzan a cargarse dentro del navegador. También puede configurar algunos módulos para que se carguen de forma diferida, es decir, los módulos no comenzarán a cargarse hasta que se llamen explícitamente.
Además de estas dos estrategias de carga, tenemos un tercer tipo de carga, es decir, una estrategia de precarga. Antes de determinar qué módulo precargar, primero comprendamos qué es la precarga en angular.

En la precarga , le decimos explícitamente al compilador Angular qué módulos con carga diferida queremos renderizar primero, es decir, en la precarga definimos algunos módulos para que se precarguen tan pronto como los módulos principales terminen de cargarse para evitar el retraso de la renderización de los módulos con carga diferida para un mejor usuario. experiencia.

Hay varios escenarios en los que decidimos qué módulos deben precargarse.

• Si el tamaño del módulo es demasiado grande, generalmente decidimos cargar dichos módulos para precargarlos porque cuando el usuario llama a dichos módulos, se cargan por completo o se cargan parcialmente para que el usuario no tenga que esperar.
• Los módulos que se usan con frecuencia en la aplicación también están configurados para precargarse para evitar el tiempo de demora.

Por lo tanto, estas son algunas condiciones importantes sobre las cuales puede decidir qué módulos con carga diferida deben cargarse como precarga.

Ahora, comprendamos cómo implementar la precarga en la aplicación angular.

Hay dos formas de hacerlo: primero, podemos precargar todos los módulos con carga diferida y, segundo, podemos definir módulos perezosos específicos para precargar.

• Todos los módulos perezosos para cargar como precarga (preloadingStrategy: PreloadAllModules):

AppRoute.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } 
            from '@angular/router';
  
  
const routes: Routes = [
    {
        path: 'user',
        loadChildren: () => import('./user/user.module')
            .then(m => m.UserModule)
    },
    {
        path: 'orders',
        loadChildren: () => import('./orders/orders.module')
            .then(m => m.OrdersModule)
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];
  
@NgModule({
    imports: [
        RouterModule.forRoot(routes, 
            { prelaodingStrategy: PreloadAllModules })
    ],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule { }
  
export class AppRoutingModule { }

Componente de usuario.ts:

import { Component, OnInit } from '@angular/core';
  
  
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit, OnDestroy {
  
  constructor() { }
  
  ngOnInit() {
  Console.log("Loading started......");
  }
  
  ngOnDestroy() {
  }
  
}

OrderComponent.ts:

import { Component, OnInit } from '@angular/core';
  
  
@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
  
  constructor() { }
  
  ngOnInit() {
  Console.log("Order Loading started......");
  }
  
  
}

Salida: cuando vaya a la pestaña de red en las opciones de desarrollador, verá que tan pronto como se cargue su componente de arranque, todos los demás módulos, tanto el usuario como el pedido, también comenzarán a cargarse, esto es una precarga de todos los módulos.

Como puede ver, tanto el módulo de pedidos como el de usuarios comienzan a cargarse.

Módulo perezoso específico para cargar como precarga (datos: {precarga: verdadero}):

AppRoute.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } 
        from '@angular/router';
  
  
const routes: Routes = [
    {
        path: 'user',
        loadChildren: () => import('./user/user.module')
            .then(m => m.UserModule),
        data: { preload: true }
    },
    {
        path: 'orders',
        loadChildren: () => import('./orders/orders.module')
            .then(m => m.OrdersModule)
    },
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];
  
@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule { }

Componente de usuario.ts:

import { Component, OnInit } from '@angular/core';
  
  
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit, OnDestroy {
  
  constructor() { }
  
  ngOnInit() {
  Console.log("Loading started......");
  }
  
  ngOnDestroy() {
  }
  
}

OrderComponent.ts:

import { Component, OnInit } from '@angular/core';
  
  
@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
  
  constructor() { }
  
  ngOnInit() {
  Console.log("order Loading started......");
  }
}

Salida: En el ejemplo anterior, hemos establecido la precarga como verdadera solo para el componente de usuario entre todos los demás componentes con carga diferida. Ahora, si va a la pestaña de red en la opción de desarrollador o en la siguiente captura de pantalla, verá que después de cargar el componente de arranque, solo el componente de usuario comienza a cargarse, pero el componente de pedido no comienza a cargarse hasta que vayamos a ese componente explícitamente. Entonces, esta es la precarga del componente personalizado.

Como puede ver, solo el módulo de usuario comienza a cargarse, el módulo de pedidos no.

Entonces, de esta manera, podemos cargar algunos o todos los módulos perezosos como precarga.