如何选择要预加载的角钢束？

angular的加载策略决定了当应用程序运行到浏览器中时如何加载应用程序模块。在Angular中，我们有三种加载类型：急切加载，延迟加载和预加载。默认情况下，Angular会紧随其后加载，即，一旦应用程序开始在浏览器中下载，模块就会开始在浏览器中加载。您还可以将某些模块设置为延迟加载，即，只有在明确调用它们之前，模块才会开始加载。
除了这两种加载策略外，我们还有第三种加载类型，即预加载策略。在确定要预加载的模块之前，让我们首先了解什么是角度预加载。

在预加载中，我们明确告诉Angular编译器我们首先要预渲染哪些延迟加载的模块，即在预加载中，我们定义了一些要在主模块完成加载后立即预加载的模块，以避免延迟加载延迟加载的模块，以更好地为用户服务经验。

在多种情况下，我们决定应预加载哪些模块。

• 如果模块太大，我们通常决定加载此类模块以进行预加载，因为当用户调用此类模块时，它们要么是完全加载，要么是完全部分加载，因此用户不必等待。
• 应用程序中经常使用的模块也被设置为预加载以避免延迟时间。

因此，这些是一些重要条件，您可以在这些条件上决定哪些延迟加载的模块应作为预加载进行加载。

现在，让我们了解如何在angular应用程序中实现预加载。

这样做有两种方法，首先我们可以预加载所有延迟加载的模块，其次，我们可以定义特定的延迟模块进行预加载。

• 要加载为预加载的所有惰性模块(preloadingStrategy：PreloadAllModules)：

AppRoute.ts：

Javascript

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 { }

UserComponent.ts：

Java脚本

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：

Java脚本

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......");
  }
  
  
}

输出：当转到开发人员选项下的网络选项卡时，您会看到，一旦加载了引导程序组件，所有其他用户和订单模块也将开始加载，这就是所有模块的预加载。

如您所见，订单和用户模块都开始加载

要加载为预加载的特定惰性模块(数据：{preload：true})：

AppRoute.ts：

Java脚本

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 { }

UserComponent.ts：

Java脚本

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：

Java脚本

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......");
  }
}

输出：在上面的示例中，我们为所有其他延迟加载的组件中的仅用户组件设置了preload true。现在，如果转到开发人员选项下的网络选项卡或下面的屏幕截图，您将看到在加载引导程序组件之后，只有用户组件才开始加载，但是订单组件直到我们明确地转到该组件后才开始加载。因此，这是自定义组件的预加载。

如您所见，只有用户模块开始加载，而订单模块则没有。

因此，通过这种方式，我们可以将部分或全部延迟模块作为预加载来加载。