Angular 中的延迟加载

介绍

Angular 创建 SPA（单页应用程序），因此所有组件、模块和其他文件都编译在一个文件中并立即加载。不必要的模块也可能会被加载。例如，如果我们为前端和后端办公室创建了一个应用程序，那么即使前端办公室用户登录，两个模块文件也会被加载。在这里，后台办公模块文件被不必要地下载。如果我们的应用程序很小并且功能有限，这很好，但对于大型应用程序，这将增加应用程序的初始加载时间。

延迟加载功能允许在需要时加载 Angular 应用程序的组件、模块和其他文件。这有助于保持初始包大小较小，因此减少了初始加载时间。

在 Angular 中，每个应用程序都使用至少一个作为应用程序根模块的 NgModule 类。该应用程序使用根模块进行引导。根据应用程序的性质，Angular 应用程序可能有多个模块。根模块或应用模块在 /src/app 下创建。

模块的延迟加载可以使用根路由模块来完成。这使用 loadChildren 方法延迟加载模块。可以使用字符串或 LoadChildrenCallback 定义 loadChildren。在 Angular 8.0 中，基于字符串的 loadChildren 方法已被弃用，因此我们必须使用 LoadChildrenCallback 方法。

一步一步的例子，

第 1 步：使用路由创建 Angular 应用程序

如果您使用的是 Angular CLI，请使用“–routing”标志创建 Angular App

ng new LazyLoadingTestApp --routing

上面的命令创建了名为“LazyLoadingTestApp”的 Angular 应用程序，这里我们传递了“–routing”标志，因此也会生成包含所有路由的“app-routing.module.ts”。该文件用于为我们的功能模块定义延迟加载。

第 2 步：创建功能模块“FeatureModuleExample”

ng generate module FeatureModuleExample --route exp1 --module app.module

上面的命令创建了“feature-module-example”文件夹，它是新的可延迟加载的功能模块“feature-module-example.module.ts”。

第 3 步：在“feature-module-example”中创建 Demo 组件

ng g c .\feature-module-example\demoComponent

上面的命令在“feature-module-example”文件夹中创建了新组件，并在“feature-module-example.module”中注册了这个组件。

第 4 步：为新模块添加路由

“app-routing.module”包含应用程序所需的所有路由。延迟加载模块有自己的路由文件，因此可以使用“loadChildren”方法在主路由文件中定义延迟加载模块。

定义 loadChildren 方法有两种方式：动态导入（LoadChildrenCallback）和基于字符串。

延迟加载模块不引用应用程序根模块，因此我们需要使用浏览器内置的 import (‘…’) 语法进行动态导入。

const routes: Routes = [
  {
    path: 'demo',
    loadChildren: () => import('./feature-module-example/feature-module-example.module').then(m => m.FeatureModuleExampleModule)
  }
];

使用动态导入方法时可能会出现编译错误。将 tsconfig.json 文件中的“target”和“module”属性值更改为“esnext”。

{
	...
	"module": "esnext",
    "target": "esnext",
	....
}

const routes: Routes = [
  {
    path: 'demo',
	loadChildren:'./feature-module-example/feature-module-example.module#FeatureModuleExampleModule'
  }
];

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DemoComponentComponent } from './demo-component/demo-component.component';

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

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