Angular路由预加载

这篇文章发布于 2020-05-06 23:25:23

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

Angular项目中，我们知道初始化模块为根模块，一般情况下避免加载过慢，我们会部署导入基础模块。随着项目不断发展壮大，会根据业务功能划分需多特性模块载入。我们都了解过其惰性加载（或称其懒加载亦或按需加载），就是当点击某个模块路由时才会加载。具体可以查看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包，也算是一种解决方案，或许有一定帮助，这边本地测试无明显区别就不予演示。

可以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自定义预加载策略可以阅读这里。