Angular 是一个流行的框架，用于构建动态和响应式 Web 应用程序。其关键特性之一是其路由功能，允许开发人员创建复杂且直观的导航结构。随着 Angular 4 的发布，引入了延迟加载，这彻底改变了我们构建大型应用程序的方式。在本文中，我们将讨论延迟加载以及它如何与 Angular 中的路由一起工作。

什么是延迟加载？

延迟加载是一种允许按需加载资源（例如模块或组件）的技术，而不是在加载应用程序时预先加载。该技术通过减少初始加载时间和优化网络资源的使用，显着提高了 Web 应用程序的性能。在传统的 Angular 应用程序中，所有必要的资源都是预先加载的，这可能会导致加载时间变慢并增加网络流量。这在可能需要许多组件和模块的大规模应用中尤其成问题。

延迟加载通过只在需要时加载资源来解决这个问题。例如，如果用户导航到应用程序中的特定路径，则此时仅加载该路径所需的资源。这意味着可以更快、更高效地加载应用程序，从而增强用户体验。

延迟加载如何与 Angular 中的路由一起使用？

路由是 Angular 的一项强大功能，它允许开发人员创建高度交互和响应迅速的应用程序。延迟加载与 Angular 中的路由无缝配合，允许仅在需要时加载资源。让我们来看看这在实践中是如何工作的。

首先，我们需要在我们的应用程序中定义我们的路线。这通常在app-routing.module.ts文件中完成，如下所示：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

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

在这个例子中，我们定义了两条路线：home和about。该loadChildren属性指定激活路由时要加载的模块。在这种情况下，将加载HomeModule和模块。

在Angular中，可以使用Loaders来实现延迟加载。Loaders是Angular提供的一种将大组件拆分成多个小组件的方式，从而在加载时减少初始加载时间。当应用程序需要加载一个较小的组件时，它可以使用NgModule中的imports属性来导入整个模块，而这将导致所有组件一起加载。使用Loaders可以将这些组件拆分成更小的组件，并在需要时动态加载它们。

以下是如何使用Loaders实现延迟加载的步骤：
创建一个新的Loader：

import { NgModule, ModuleWithProviders } from '@angular/core';  
import { RouterModule } from '@angular/router';  
import { DefaultLoader } from '@angular/router';  
  
export class MyLoader implements Loader {  
  load(route: ActivatedRouteSnapshot, loadChildren: string): Promise<ComponentRef<any>> {  
    // 在这里处理延迟加载逻辑  
    // 可以使用 setTimeout 或者其他异步方法来实现延迟  
    return new Promise((resolve) => {  
      setTimeout(() => {  
        const componentFactory = this.resolver.resolveComponentFactory(loadChildren);  
        const componentRef = componentFactory.create(this.Injector);  
        this.routerState.parent().parent().parent().parent().parent().parent().parent().parent().parent().parent().router.附属(componentRef.hostView);  
        resolve(componentRef);  
      }, 1000);  
    });  
  }  
}

在模块中注册新的Loader：

typescript
import { NgModule } from '@angular/core';  
import { RouterModule } from '@angular/router';  
import { MyLoader } from './my-loader';  
  
@NgModule({  
  imports: [RouterModule],  
  exports: [RouterModule],  
  providers: [  
    {  
      provide: RouterModule.loader,  
      useClass: MyLoader,  
    },  
  ],  
})  
export class AppModule {}

通过上述步骤，我们创建了一个新的Loader，并在应用程序的根模块中注册了它。现在，每当需要加载组件时，Loader都会被调用，从而实现延迟加载。

AboutModule

需要注意的是，懒加载需要每个模块都有自己的路由模块。这是因为每个模块都需要定义自己的路由。接下来，我们需要创建要为每个路由加载的模块。这可以通过以下方式完成：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
// 堆代码 duidaima.com
const routes: Routes = [
  { path: '', component: HomeComponent }
];

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

在这里，我们定义了一个单一的路线，HomeComponent当路线被激活时被加载。然后将模块导入到 main 中AppRoutingModule，如前面的示例所示。

延迟加载通过在激活路由时动态加载模块来工作。这意味着该模块仅在需要时加载，而不是在加载应用程序时预先加载。这可以显着提高大型应用程序的性能。

Angular 延迟加载的好处
延迟加载为 Angular 应用程序提供了许多好处。让我们来看看其中的一些好处：
提高性能： 延迟加载显着提高了 Web 应用程序的性能，减少了加载时间并优化了网络资源。
更好的用户体验： 通过减少初始加载时间，用户能够更快速、更轻松地浏览应用程序。
代码拆分： 延迟加载允许代码拆分，这意味着只加载特定路由所需的代码。这可以导致更小的包大小，使应用程序更高效。
更低的内存消耗： 通过仅在需要时加载资源，内存消耗减少，从而提高整体应用程序性能。

结论
延迟加载是一种强大的技术，可以极大地提高 Angular 应用程序的性能。当与路由结合使用时，它允许动态加载资源，从而缩短加载时间并优化网络性能。了解延迟加载的工作原理对于构建高效且响应迅速的大型应用程序至关重要。通过遵循本文中概述的指南，您可以充分利用这一强大的特性并构建更好、更快的 Angular 应用程序。