面试题：Angular中如何优化模块的懒加载以提升性能

1. 实现模块懒加载的基本方式

在Angular中，实现模块懒加载主要通过RouterModule。假设我们有一个Angular应用，结构如下：

src/
├── app/
│   ├── app.module.ts
│   ├── app.component.ts
│   └── feature/
│       ├── feature.module.ts
│       └── feature.component.ts

在app.module.ts的路由配置中，使用loadChildren属性来指定懒加载模块。例如：

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

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

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

这里loadChildren使用了动态导入语法import()，它返回一个Promise，then回调中返回懒加载模块。

2. 配置懒加载模块的路径

懒加载模块的路径在loadChildren中指定。在上述例子中，path: 'feature'表示当用户访问/feature路径时，加载对应的懒加载模块。路径配置需遵循Angular路由的规则，支持嵌套路由等。例如，如果有更复杂的模块结构：

src/
├── app/
│   ├── app.module.ts
│   ├── app.component.ts
│   └── admin/
│       ├── admin.module.ts
│       ├── admin.component.ts
│       └── dashboard/
│           ├── dashboard.module.ts
│           └── dashboard.component.ts

路由配置可以写成：

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    children: [
      {
        path: 'dashboard',
        loadChildren: () => import('./admin/dashboard/dashboard.module').then(m => m.DashboardModule)
      }
    ]
  }
];

这样通过合理配置路径，可以实现多层次的模块懒加载。

3. 预加载策略优化性能

Angular提供了预加载策略来进一步优化性能。预加载策略可以在应用初始化时，提前加载一些懒加载模块，这样当用户实际访问到对应模块时，加载速度会更快。

使用PreloadAllModules策略：这是Angular内置的一种预加载策略，会在应用初始化后，尽可能快地并行预加载所有懒加载模块。在app.module.ts中配置如下：

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

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

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

自定义预加载策略：如果PreloadAllModules策略不满足需求，可以自定义预加载策略。首先创建一个实现PreloadingStrategy接口的类，例如：

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable()
export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // 自定义逻辑，比如根据route.data判断是否预加载
    if (route.data && route.data['preload']) {
      return load();
    } else {
      return of(null);
    }
  }
}

然后在路由配置中使用自定义策略：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomPreloadingStrategy } from './custom-preloading-strategy';

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule),
    data: { preload: true }
  }
];

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

通过合理配置路径和预加载策略，可以显著提高Angular应用的加载速度和性能。

星途面试题库

面试题：Angular中如何优化模块的懒加载以提升性能

知识考点

面试题答案

1. 实现模块懒加载的基本方式

2. 配置懒加载模块的路径

3. 预加载策略优化性能