在 Angular 中路由预加载策略

提前预加载路径以加快用户的导航速度。

路径级代码拆分可延迟与最初不需要的路径关联的 JavaScript,从而缩短应用的初始加载时间。这样,Angular 路由器会等到用户导航到给定路由,然后再触发网络请求以下载关联的 JavaScript。

虽然此技术非常适合初始网页加载,但可能会降低导航速度,具体取决于用户的网络延迟时间和带宽。解决此问题的一种方法是预加载路线。使用预加载功能时,当用户位于给定路线时,您可以下载并缓存与接下来可能需要的路线相关联的 JavaScript。Angular 路由器开箱即用即可提供此功能。

在本文中,您将了解如何利用 Angular 中的 JavaScript 预加载功能,在使用路由级代码拆分时加快导航速度。

Angular 中的路由预加载策略

Angular 路由器提供了一个名为 preloadingStrategy 的配置属性,用于定义预加载和处理延迟加载的 Angular 模块的逻辑。我们将介绍两种可能的策略:

  • PreloadAllModules,顾名思义,它会预加载所有延迟加载的路线
  • QuicklinkStrategy,仅预加载与当前网页上的链接相关联的路由。

本文的其余部分将介绍一个 Angular 示例应用。您可以在 GitHub 上找到该应用的源代码。

使用 PreloadAllModules 策略

示例应用包含多个延迟加载的路线。如需使用内置于 Angular 中的 PreloadAllModules 策略预加载所有这些模块,请在路由器配置中将其指定为 preloadingStrategy 属性的值:

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

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

现在,部署应用并查看 Chrome DevTools 中的 Network 面板:

  1. 按 `Control+Shift+J`(在 Mac 上为 `Command+Option+J`)打开 DevTools。
  2. 点击网络标签页。

您应该会看到,在您打开应用时,路由器在后台下载了 nyan-nyan-module.jsabout-about-module.js

PreloadAllModules 策略的运作方式。

路由器还注册了模块的路由声明,以便您在导航到与任何预加载模块关联的网址时,转换是即时的。

PreloadAllModules 在许多情况下都非常有用。不过,如果您有数十个模块,其积极的预加载功能确实会增加网络使用量。此外,由于路由器需要在所有预加载的模块中注册路由,因此可能会导致界面线程中进行大量计算,进而导致用户体验缓慢。

快捷链接库为大型应用提供了更好的策略。它使用 IntersectionObserver API 仅预加载与网页上当前可见的链接相关联的模块。

您可以使用 ngx-quicklink 软件包向 Angular 应用添加快捷链接。首先,从 npm 安装该软件包:

npm install --save ngx-quicklink

在项目中提供该组件后,您可以通过指定路由器的 preloadingStrategy 并导入 QuicklinkModule 来使用 QuicklinkStrategy

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

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

现在,当您再次打开应用时,您会发现路由器仅预加载 nyan-nyan-module.js,因为页面中心的按钮包含指向它的路由器链接。打开侧边导航栏后,您会发现路由器会预加载“关于”路由:

快捷链接预加载策略的演示。

上述示例适用于基本应用,但如果您的应用包含多个延迟加载的模块,则需要将 QuicklinkModule 导入到共享模块中,将其导出,然后将共享模块导入到延迟加载的模块中。

首先,将 ngx-quicklink 中的 QuicklinkModule 导入到共享模块中并导出:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

然后,将 SharedModule 导入到所有延迟加载的模块中:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

Quicklinks 现在可在延迟加载的模块中使用。

超越基本预加载

虽然通过快捷链接选择性预加载可以显著加快导航速度,但您可以使用预测性预加载(由 Guess.js 实现)让预加载策略在网络效率方面更上一层楼。通过分析 Google Analytics 或其他分析服务提供商提供的报告,Guess.js 可以预测用户的导航历程,并仅预加载可能在下一步需要的 JavaScript 分块。

您可以访问 Guess.js 网站上的此页面,了解如何将 Guess.js 与 Angular 搭配使用。

总结

如需在使用路径级代码拆分时加快导航速度,请执行以下操作:

  1. 根据应用的大小选择合适的预加载策略:
    • 模块较少的应用可以使用 Angular 的内置 PreloadAllModules 策略。
    • 包含多个模块的应用应使用自定义预加载策略,例如 Angular 的快捷链接或预测性预加载(如 Guess.js 中所实现)。
  2. 通过设置 Angular 路由器的 preloadStrategy 属性来配置预加载策略。