迹忆客 专注技术分享

本文将讨论 Angular 中延迟加载的用法以及如何实现它。

延迟加载是延迟加载网页资源的过程。这种技术通常用于具有大量数据或图像的网页，而不是顶层。

Angular 延迟加载有助于仅加载给定页面所需的资源。这会减少初始下载大小并通过减少网络请求来提高应用程序的性能。

它可以使用 Angular 内置的延迟加载模块或外部模块（例如 Angular Universal Lazy Load Module）来实现，该模块依赖于 Webpack 进行配置和构建。

Angular 中延迟加载的使用

延迟加载最常见的用例是从 API 加载数据，但你不想获取所有数据。如果你的应用程序只有一个没有路由的视图，它将无法工作。

延迟加载可确保在首次部署应用程序时仅加载和使用基本模块。这有利于应用程序的性能，因为它减少了加载时间，从而为最终用户提供了更具响应性的应用程序。

加载所有模块需要一些时间，所以它的作用是在用户第一次访问页面时仅加载几个模块，然后根据需要加载更多模块。

让我们讨论一些 Angular 延迟加载用例。

• 将非关键脚本和样式表推迟到需要时；
• 电子商务网站上面向供应商和面向客户的屏幕可能被分成不同的模块。你也可以自行构建支付模块。
• 仅按需加载脚本和样式表。

在 Angular 中实现延迟加载

在 Angular 中实现延迟加载是一个非常简单的过程。我们必须添加正确的模块并设置我们的路由。

第一步是为延迟加载添加必要的模块。我们通过从 @angular/router 导入 LazyModule 并将其添加到应用程序模块的 NgModule 装饰器中的导入数组来实现此目的。

然后，我们必须配置我们的路由来指定哪些模块应该按需加载或延迟加载。我们添加一条带有 loadChildren: 'lazy-loaded-child-routes' 的新路由作为属性或修改现有路由。

例子：

TypeScript 代码（app.component.ts）：

import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent { }
@Component({
    selector: 'app-home',
    template: '<h3>Home Active!!!</h3>',
})
export class AppadComponent  {}
const routes: Routes = [
    { path: 'Home', component: AppadComponent },
    { path: 'About', loadChildren: './lazy-loading.module#SecondModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }

TypeScript 代码（lazy-loading.modules.ts）：

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'app-about',
    template: '<h3>About Active!!!</h3>',
})
export class MyComponent  {}
const routes: Routes = [
    { path: '', component: MyComponent }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }
@NgModule({
    imports:      [ RootRoutingModule ],
    declarations: [ MyComponent ]
})
export class SecondModule { }

HTML 代码（app.component.html）：

<h2> Example of Angular Lazy Loading</h2>
    <a routerLink='Home'>Home</a>
    <br>
    <a routerLink='About'>About</a>
    <router-outlet></router-outlet>

如果可能，请避免用户经常访问的延迟加载路径。尽可能减小块的大小。

此外，当检索到延迟加载的路由时，使用路由状态来显示加载器或动画，以便你的用户不会认为你的应用程序滞后。