面试题：Angular 中懒加载模块的基本配置与原理

Question

请描述在 Angular 项目中如何配置懒加载模块，并解释懒加载模块背后的基本原理。请举例说明在路由配置中如何实现懒加载。

Answer 1

配置懒加载模块步骤

1. 创建模块：使用 Angular CLI 创建一个新的模块，例如 ng generate module lazy - module --routing。这将创建一个名为 lazy - module 的模块及其路由模块。
2. 配置路由：在懒加载模块的路由模块（例如 lazy - module - routing.module.ts）中定义该模块的路由。例如：

const routes: Routes = [
  { path: 'lazy - route', component: LazyComponent }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LazyModuleRoutingModule {}

3. 在主路由中配置懒加载：在主路由模块（通常是 app - routing.module.ts）中，使用 loadChildren 配置懒加载。例如：

const routes: Routes = [
  {
    path: 'lazy - module',
    loadChildren: () => import('./lazy - module/lazy - module.module').then(m => m.LazyModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

懒加载模块基本原理

懒加载模块背后的基本原理是延迟加载应用程序的部分代码。当应用启动时，只会加载必要的核心模块和初始路由对应的模块。当用户导航到特定的路由（配置了懒加载的路由）时，才会加载对应的懒加载模块。这样可以显著减少初始加载时间，特别是对于大型应用程序，因为减少了初始加载的代码体积。

路由配置实现懒加载示例

以上面 app - routing.module.ts 中的配置为例，当用户访问 /lazy - module 路由时，Angular 会通过 loadChildren 函数动态导入 lazy - module.module 模块。import() 函数是 ECMAScript 2020 引入的动态导入语法，then 回调函数中返回要加载的模块。这样就实现了在路由导航时才加载 lazy - module 模块及其相关的组件、服务等，达到懒加载的效果。