面试题：Angular路由在单页应用导航中如何配置懒加载模块

Question

在Angular实现单页应用导航场景下，描述如何对路由模块进行懒加载配置，以优化应用加载性能，并举例说明配置时关键的语法和步骤。

Answer 1

1. 懒加载配置步骤与关键语法

1. 创建路由模块：
   • 首先确保每个需要懒加载的功能模块都有自己独立的路由模块。例如，假设我们有一个UserModule用于用户相关功能，创建user - routing.module.ts：

   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';
   import { UserComponent } from './user.component';
   
   const routes: Routes = [
     { path: '', component: UserComponent }
   ];
   
   @NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
   })
   export class UserRoutingModule {}
   

   • 这里RouterModule.forChild(routes)用于为子模块定义路由。
2. 在主路由模块中配置懒加载：
   • 在主路由模块（通常是app - routing.module.ts）中，使用loadChildren语法来配置懒加载。例如：

   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';
   
   const routes: Routes = [
     {
       path: 'users',
       loadChildren: () => import('./user/user - module').then(m => m.UserModule)
     }
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule {}
   

   • loadChildren属性的值是一个函数，该函数使用import()动态导入模块。import()返回一个Promise，then方法用于解析导入的模块，这里解析出UserModule。path指定了触发懒加载的路由路径，当用户访问/users路径时，UserModule及其相关组件才会被加载。

2. 优化应用加载性能原理

通过懒加载，Angular应用在初始加载时不会加载所有模块，只有当用户导航到特定路由时，对应的模块才会被加载。这样减少了初始加载的代码体积，加快了应用的启动速度，提升了用户体验。特别是对于大型单页应用，包含许多功能模块时，懒加载能显著优化性能。