Angular路由预加载

这篇文章由 DeathGhost 编辑,发布于

归类于 Angular » 👋分享到微博 当前评论 0 条。

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

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

Angular预加载策略
Angular路由模块预加载策略

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

预加载的工作原理

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

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

  1. 完全不预加载,这是默认值。惰性加载的特性区仍然会按需加载。
  2. 预加载所有惰性加载的特性区。

自定义按需预加载策略

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

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


Angular Angular框架 Angular路由 预加载 预加载技术 异步加载 后台加载 自定义按需预加载策略 性能 自定义预加载策略

上一篇:

下一篇: