# Angular路由预加载

> 我们知道Angular路由能让用户从一个视图导航到另一个视图，随着项目的发展会生产N多个模块，我们通过惰性加载（懒加载）将其处理，而预加载是介于二者之间，就是在初始化工作完成后所需的模块预先加载完成，可供用户快速访问。

Author: DeathGhost
Published: 2020-05-06 23:25:23
Category: angular
Canonical: https://www.deathghost.cn/article/angular/73
Keywords: Angular, Angular框架, Angular路由, 预加载, 预加载技术, 异步加载, 后台加载, 自定义按需预加载策略, 性能, 自定义预加载策略

Angular项目中，我们知道初始化模块为根模块，一般情况下避免加载过慢，我们会部署导入基础模块。随着项目不断发展壮大，会根据业务功能划分需多特性模块载入。我们都了解过其惰性加载（或称其懒加载亦或按需加载），就是当点击某个模块路由时才会加载。具体可以查看[Angular路由惰性加载](https://www.deathghost.cn/article/angular/29)这篇文章。

![Angular预加载策略](https://www.deathghost.cn/public/upload/article/2020/05/06/1588779861540335.jpg)

Angular路由模块预加载策略

例如，我们初始化登录界面完成后，需要立即访问某一模块内容时，这时我们就需要使用路由预加载技术，当用户访问下一目标模块内容时，这一目标模块已在后台加载完毕，可快速访问。

## 预加载的工作原理

在每次成功的导航后，路由器会在自己的配置中查找尚未加载且可以预加载的模块。 是否加载某个模块，以及要加载哪些模块，取决于预加载策略。

### 路由内置了两种预加载策略：

- 完全不预加载，这是默认值。惰性加载的特性区仍然会按需加载。

- 预加载所有惰性加载的特性区。

## 自定义按需预加载策略

当然根据具体情境还有一种情况就是预加载某一模块，非所有模块。使用自定义预加载策略，你可以控制路由器预加载哪些路由以及如何加载。

{
  path: 'user',
  loadChildren: () => import('./user/user.module').then(m => m.UserModule),
  data: { preload: true }
},
例如，我们仅预加载USER模块，通过设置参数，它只预加载那些 data.preload 标志为 true 的路由。

## 为所有惰性模块加载启用预加载

预加载所有惰性模块，这是我使用的方法，按目前项目暂未发现不妥，具体根据情形而定，具有多个延迟加载的路由。要使用PreloadAllModules Angular内置的策略预先加载所有这些，请将其指定为preloadingStrategy路由器配置中属性的值，其方法如下。

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …
简单粗暴直截了当。🤣

具体效果，打开控制台按Control+Shift+J（或Command+Option+J在Mac上）打开DevTools。单击网络选项卡查看。

## 关于ngx-quicklink包方案

当然了，随着项目再次状态，模块更多时，上面这个还是有一定的延缓。按我目前项目而言，影响不是很大，可以参考[ngx-quicklink](https://www.npmjs.com/package/ngx-quicklink)包，也算是一种解决方案，或许有一定帮助，这边本地测试无明显区别就不予演示。

可以QuicklinkStrategy通过指定路由器preloadingStrategy并导入来使用QuicklinkModule

### 使用方法：

npm install --save ngx-quicklink
import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}
具体实际项目实践查看效果。Angular自定义预加载策略可以阅读[这里](https://www.deathghost.cn/article/angular/88)。

## Related

- Previous: [Angular 装饰器 HostListener 监听DOM事件](https://www.deathghost.cn/article/angular/71)
- Next: [Angular自定义预加载策略](https://www.deathghost.cn/article/angular/88)