面试题：Angular模块懒加载的基本原理与实现

Question

请阐述Angular中模块懒加载的基本原理，并举例说明如何在Angular项目中实现一个简单的模块懒加载场景，包括路由配置及模块的设置。

Answer 1

Angular中模块懒加载基本原理

1. 原理概述：Angular的模块懒加载基于路由机制，当应用程序初始化时，懒加载模块不会立即加载到内存中。只有当用户导航到特定路由，触发对懒加载模块的需求时，该模块才会被动态加载。这通过Webpack等打包工具，将懒加载模块拆分成独立的JavaScript文件，实现按需加载，从而提升应用的初始加载性能。
2. 工作流程：
   • 路由配置：在路由配置中，使用loadChildren属性来指定懒加载模块的路径。当应用启动时，路由器只加载主模块和初始路由相关的内容。
   • 触发加载：当用户访问匹配懒加载模块路由的URL时，路由器会根据loadChildren的配置，异步请求并加载相应的模块代码。加载完成后，路由器会激活该模块的路由，并显示对应的组件。

在Angular项目中实现简单模块懒加载场景

1. 路由配置

假设项目结构如下：

src/
├── app/
│   ├── app-routing.module.ts
│   ├── app.component.ts
│   └──...
└── lazy - module/
    ├── lazy - module - routing.module.ts
    ├── lazy - module.component.ts
    └── lazy - module.module.ts

• app - routing.module.ts：

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

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

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

在上述代码中，path: 'lazy'表示当用户访问/lazy路径时，会触发懒加载。loadChildren使用动态导入语法，返回一个Promise，当Promise resolve时，返回懒加载模块。

2. 懒加载模块设置

• lazy - module.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyModuleComponent } from './lazy - module.component';
import { LazyModuleRoutingModule } from './lazy - module - routing.module';

@NgModule({
    declarations: [LazyModuleComponent],
    imports: [
        CommonModule,
        LazyModuleRoutingModule
    ]
})
export class LazyModule {}

• lazy - module - routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LazyModuleComponent } from './lazy - module.component';

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

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

• lazy - module.component.ts：

import { Component } from '@angular/core';

@Component({
    selector: 'app - lazy - module',
    templateUrl: './lazy - module.component.html',
    styleUrls: ['./lazy - module.component.css']
})
export class LazyModuleComponent {}

在模板文件lazy - module.component.html中可以添加一些简单内容，例如：

<h1>这是懒加载模块的内容</h1>

这样，当用户访问/lazy路径时，LazyModule模块会被懒加载，LazyModuleComponent组件会被渲染。