Angular 延迟加载

2025年3月17日 | 阅读 8 分钟

懒加载是 Angular 的一项技术，它允许您在激活特定路由时加载 JavaScript 组件。通过将应用程序分成多个包来提高应用程序的加载速度。当用户在应用程序中导航时，会按需加载包。

懒加载有助于保持包的大小较小，从而有助于缩短加载时间。我们必须使用类装饰器来创建一个 Angular 模块 @NgModule，该装饰器使用定义模块的元数据对象。

主要属性有

imports：此模块的组件与 Array 一起用于其他模块。
declarations：它接收组件的数组。
exports：定义其他模块使用的组件、指令和管道的数组。
providers：声明可供整个应用程序使用的服务（如果是根模块）。

原生根模块示例

import { BrowserModule } from '@angular/platform browser;
import { NgModule } from '@angular/core';
import { AppComponent} from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  Announcement: [
    AppComponent
  ],
  import: [
    browser module,
    app routing module
  ],
  Providers: [], //Os service declarados and Propried providers do modulo root ficum disponivis m toda a applicacao
  bootstrap: [AppComponent] //define some or module root um bootstrap
})
export class AppModule { }

在上面的示例代码中，我们使用 @NgModule 装饰器将 AppModule 类转换为 Angular 模块。

懒加载基础

本节介绍 懒加载路由配置 的基本流程。

在懒加载的 Angular 模块中，请在如下的 AppRoutingModule 根配置中使用 loadChildren。

AppRoutingModule (excerpt)
content_copyconst routes: Routes = [
  {
    path: 'item',
    loadChildren: () => import('./items/items.module').then(m => m.ItemModule)
  }
];

在懒加载模块的路由配置中为组件添加路由。

懒加载模块的路由模块

content_copyconst routes: Routes = [
  {
    path: '',
    component: ItemsComponent
  }
];

继续页面的以下部分，了解懒加载模块的逐步说明。

请按照以下步骤在 Angular 项目中实现懒加载：

步骤 1

创建一个新的 Angular 项目，

步骤 2

独立路由的目的是处理 Angular 懒加载模块的所有组件。

步骤 3

在懒加载模块中创建一个名为 lazy-demo 的组件，

步骤 4

在标题中添加链接将实现懒加载。

app.component.html

<li class="nav-item">
   <a class="nav-link" [routerLink]="['/lazy-loading']">
      slow loading
   </a>
</li>

步骤 5

这里我们将使用 load children 懒加载模块。

app-routing.module.ts

{
   path: 'lazy-loading',
   load children: () => import('./lazy-loading/lazy-loading.module')
   .then(m => m.LazyLoadingModule)
},

步骤 6

在 lazy-loading-routing.module.ts 中设置路由。

lazy-loading-routing.module.ts

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import { LazyDemoComponent } from './lazy-demo/lazy-demo.component';
const route: route = [
 { path: '', component: LazyDemoComponent }
];
 @NgModule({
    import: [routerModule. for child (route)],
    export: [routermodule]
})
export class LazyLoadingRoutingModule { }

如果上面的 import 选项出错，请尝试以下方法：

import { LazyDemoComponent } from "E:/Pranam/Git Repository Projects/Angular-Lazy-Loading-Example/src/app/lazy-demo/lazy-demo.component";

运行应用程序。

打开终端并执行 "ng serve" 命令。

现在转到 浏览器 https://:4200。

刷新浏览器时，您将看到 main.js 正在被提供。只有当访问根 /lazy-loading 时，才会加载懒加载模块。

验证懒加载

运行以下命令生成构建：

上图验证了为懒加载模块生成了一个单独的区域。

您将在那里看到一个单独的文件，用于使用懒加载的模块。

安装懒加载功能模块有两个步骤：

使用 CLI 和 --route 标志构建功能模块。
配置路由。

设置应用

如果您没有应用程序，可以按照以下步骤使用 CLI 创建应用程序。如果您已有应用程序，请转到配置的路由。在 customer-app 是应用程序名称的地方输入以下命令：

它会创建一个名为 client-app 的应用程序和一个名为 app-routing.module.ts 的路由标志文件，这是设置懒加载的重要文件之一。通过输入 cd client-app 命令导航到项目。

创建带有路由的模块

加载 client 功能模块的路径是 client，因为它与 --route 选项指定的一样。

它会创建一个名为 client-app 的应用程序，并且 --routing 标志会创建一个名为 app-routing.module.ts 的文件，这是设置功能模块懒加载所需的文件之一。通过输入 cd client-app 命令导航到项目。

--routing 选项用于 Angular/CLI 版本 8.1 或更高版本。

它在 Customer.module.ts 文件中定义了一个新的可懒加载的便捷模块 CustomersModule，并在 customers-routing.module.ts 文件中定义了路由模块 CustomersRoutingModule。

content_copyconst routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

基于字符串的懒加载

在 import() 语法中，loadChildren 路由的字符串语法已被弃用。您可以选择使用基于字符串的懒加载 (loadChildren: './path/to/module#Module') 来将懒加载的路由包含在您的 tsconfig 文件中，包括懒加载的编译。

默认情况下，CLI 会创建具有 import() 语法的严格文件包含项目。

添加另一个功能模块

使用相同的命令创建一个带有路由及其存根组件的懒加载模块。

它会创建一个名为 Orders 的新文件夹，其中包含 Order 模块 和 Order 路由模块，以及新的 OrderComponent 源文件。

src/app/app-routing.module.ts
content_copyconst routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  }
];

设置 UI

您可以在地址栏中输入 URL，并且导航 UI 对用户来说既简单又常见。

src/app/app.component.html
content_copy<h1>
  {{title}}
</h1>
<button routerLink="/customers">Customers</button>
<button routerLink="/orders">Orders</button>
<button routerLink="">Home</button>
<router-outlet></router-outlet>

要查看您的应用程序到目前为止在浏览器中的样子，请在终端窗口中输入以下命令：

content_copying serve

转到 localhost:4200，您可以看到 "customer-app" 和三个按钮。

按钮有效，因为 CLI 将功能模块的路由添加到了 app.modules.ts 的 Routes 数组中。

导入和路由配置

CLI 将每个功能模块添加到应用程序级别的路由映射中。在 app-routing.module.ts 文件中，更新路由数组：

src/app/app-routing.module.ts
content_copyconst routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  },
  {
    path: 'orders',
    loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

前两个路由指向 Customer 模块 和 Order 模块。

如果您使用 CLI，则按照页面中提到的步骤进行操作。

src/app/customers/customers.module.ts
import { CommonModule } from '@angular/common';
import { CustomersRoutingModule } from './customers-routing.module';
content_copyimport { NgModule } from '@angular/core';
import { CustomersComponent } from './customers.component';
@NgModule({
  imports: [
    CommonModule,
    customersRoutingModule
  ],
  declarations: [customersComponent]
})
export class customersModule { }

Customers.module.ts 文件导入了 customers-routing.module.ts 和 Customers.component.ts 文件。CustomersRoutingModule 列在 @NgModule 的 imports 数组中，使 Customers 模块可以访问其路由模块。CustomersComponent 的声明在 Array 中，这意味着 CustomersComponent 属于 CustomersModule。

功能特定路由定义文件导入了 customer-routing.module.ts 文件中定义的功能组件，并使用 JavaScript import 语句。

src/app/customers/customers-routing.module.ts
content_copyimport { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CustomersComponent } from './customers.component';


const routes: Routes = [
  {
    path: '',
    component: CustomersComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CustomersRoutingModule { }

其他功能模块的路由模块配置类似。

src/app/orders/orders-routing.module.ts (excerpt)
content_copyimport { OrdersComponent } from './orders.component';

const routes: Routes = [
  {
    path: '',
    component: OrdersComponent
  }
];

forRoot() 和 forChild()

您可以看到 CLI 将 RouterModule.forRoot(routes) 添加到 AppRoutingModule 的 imports 数组中。

它指定 Angular AppRoutingModule 是一个路由模块，并且 forRoot() 指定了一个路由模块。它配置您传递的所有路由，为您提供对路由器指令的访问，并注册路由器服务。

CLI 还向功能路由模块添加了 RouterModule.forChild。forRoot() 方法负责路由器的全局注入器配置。其 forChild() 方法中没有注入器配置。它使用 Router Outlet 和 RouterLink 等指令。

预加载

预加载通过在后台加载应用程序的部分来改善用户体验。您可以预加载模块或组件数据。

预加载模块

预加载模块通过在后台加载应用程序的部分来改善用户体验，这样用户在激活根目录时就不会等待元素下载。

要启用懒加载模块的预加载，请从路由器导入 PreloadAllModules 令牌。

AppRoutingModule (excerpt)
content_copyimport { PreloadAllModules } from '@angular/router';

在 AppRoutingModule 中，在 forRoot() 中指定预加载策略。

AppRoutingModule (excerpt)
content_copyRouterModule.forRoot(
  appRoutes,
  {
    preloadingStrategy: PreloadAllModules
  }
)

预加载组件数据

您可以使用解析器 (resolver) 来预加载组件数据。解析器通过阻止页面显示直到必要数据出现来改善用户体验。

解析器

使用 CLI，创建一个解析器服务。生成服务的命令如下：

content_copyng generate service

在新创建的服务中实现 @angular/router 包提供的 Resolve 接口。

Resolver service (excerpt)
content_copyimport { Resolve } from '@angular/router';

...

/* An interface that represents your data model */
export interface Crisis {
  id: number;
  name: string;
}

export class CrisisDetailResolverService implements Resolve {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
    // your logic goes here
  }
}

将解析器导入到模块的路由模块中。

功能模块的路由模块

content_copyimport { CrisisDetailResolverService } from './crisis-detail-resolver.service';

将 resolve 对象添加到组件的路由配置中。

content_copy{
  path: '/your-path',
  component: YourComponent,
  resolve: {
    crisis: CrisisDetailResolverService
  }
}

在组件的构造函数中，注入一个代表当前路由的 Activated Route 类。

组件的构造函数

content_copyimport { ActivatedRoute } from '@angular/router';

@Component({ ... })
class YourComponent {
  constructor(private route: ActivatedRoute) {}
}

使用 Activated Route 类的注入实例来访问与给定路由关联的数据。

组件的 ngOnInit 生命周期钩子

content_copyimport { ActivatedRoute } from '@angular/router';

@Component({ ... })
class YourComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data
      .subscribe(data => {
        const crisis: Crisis = data.crisis;
        // ...
      });
  }
}

懒加载的优点

减少应用程序启动时间。
由于按需加载，应用程序消耗的内存更少。
避免不必要的服务器请求。

懒加载的缺点

向现有代码添加额外的代码行以实现懒加载代码。
与 JavaScript 集成时会产生额外的代码。
用户体验可能会受到影响。例如，如果页面结构不理想，则无法进行回溯。

下一个主题Angular Redux

← 上一个下一个 →

Angular 延迟加载

懒加载基础

请按照以下步骤在 Angular 项目中实现懒加载：

验证懒加载

设置应用

创建带有路由的模块

基于字符串的懒加载

添加另一个功能模块

设置 UI

content_copying serve

导入和路由配置

forRoot() 和 forChild()

预加载

预加载组件数据

解析器

content_copyng generate service

功能模块的路由模块

组件的构造函数

组件的 ngOnInit 生命周期钩子

懒加载的优点

懒加载的缺点

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

选择题

AngularJS 教程

Angular 7 教程

Angular 其他

Angular + Spring

面试题

AngularJS 指令

Angular 延迟加载

懒加载基础

请按照以下步骤在 Angular 项目中实现懒加载：

验证懒加载

设置应用

创建带有路由的模块

基于字符串的懒加载

添加另一个功能模块

设置 UI

content_copying serve

导入和路由配置

forRoot() 和 forChild()

预加载

预加载组件数据

解析器

content_copyng generate service

功能模块的路由模块

组件的构造函数

组件的 ngOnInit 生命周期钩子

懒加载的优点

懒加载的缺点

相关帖子

Angular RxJS 库

Angular 中的 Observable

Angular 属性绑定

Angular 组件

Angular 9/8 中的 Dropzone 图像上传

Angular 单元测试

Angular 生命周期钩子

什么是 Angular 服务

使用 Angular 9/8 SEO 添加页面标题和元标记

Angular 中的 10 位手机号码验证

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器