面试题：Angular懒加载与预加载的触发机制有何不同

懒加载

触发情况：
- 当路由配置中启用了懒加载，且用户导航到对应的路由时触发。例如，一个大型应用有多个功能模块，每个模块对应一个路由，当用户点击菜单进入某个特定模块路由时，该模块相关的代码（包括组件、服务等）才会被加载。
设计原理：
- 在Angular中，懒加载基于路由模块的概念。通过将应用拆分成多个独立的路由模块，每个模块可以单独打包。当应用启动时，只有主模块和必要的核心模块被加载。当用户访问特定路由时，Angular的路由系统会动态地加载对应的路由模块，这样可以显著减少初始加载时间。
- 它利用Webpack的代码分割功能，将不同的路由模块打包成独立的JavaScript文件。在运行时，Angular通过import()语法动态导入这些文件，实现按需加载。
实际项目场景举例：
- 假设开发一个电商管理系统，有商品管理、订单管理、用户管理等多个功能模块。商品管理模块只有在管理员点击“商品管理”菜单时才需要加载。可以这样配置路由：
```
const routes: Routes = [
  {
    path: 'product - management',
    loadChildren: () => import('./product - management/product - management.module').then(m => m.ProductManagementModule)
  }
];
```
- 这样，当应用启动时，商品管理模块的代码不会被加载，只有当用户访问/product - management路由时，才会加载该模块的相关代码。

预加载

触发情况：
- 预加载在应用启动后，在空闲时间或者在用户导航到特定路由之前就开始加载相关模块。例如，应用启动后，在用户还未进行任何操作时，预加载机制就开始工作，将可能用到的模块提前加载。
设计原理：
- Angular提供了PreloadingStrategy接口，默认有NoPreloading（不预加载）和PreloadAllModules（预加载所有模块）两种策略实现。PreloadAllModules策略会在应用初始化完成后，遍历所有配置了懒加载的路由模块，并开始加载它们。
- 预加载利用浏览器的空闲时间，通过HTTP请求提前获取懒加载模块的代码。这样当用户实际导航到对应的路由时，模块已经加载完成，可以快速显示，提升用户体验。

实际项目场景举例：

对于一个新闻类应用，有不同频道的模块，如体育、科技、娱乐等。虽然用户可能每次只访问一个频道，但为了提升体验，可以预加载部分热门频道的模块。
首先，在app - routing.module.ts中配置预加载策略：

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path:'sports',
    loadChildren: () => import('./sports/sports.module').then(m => m.SportsModule)
  },
  {
    path: 'technology',
    loadChildren: () => import('./technology/technology.module').then(m => m.TechnologyModule)
  },
  {
    path: 'entertainment',
    loadChildren: () => import('./entertainment/entertainment.module').then(m => m.EntertainmentModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

这样，应用启动后，会在空闲时间预加载体育、科技、娱乐等模块，当用户点击进入相应频道时，加载速度会更快。

星途面试题库

面试题：Angular懒加载与预加载的触发机制有何不同

知识考点

面试题答案

懒加载

预加载