提前预加载路线以加快用户的导航速度。
路由级代码拆分会延迟与最初并不需要的路由相关联的 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 面板:
- 按 `Control+Shift+J`(在 Mac 上,则按 `Command+Option+J`)打开开发者工具。
- 点击网络标签页。
当您打开应用时,您应该会看到路由器在后台下载了 nyan-nyan-module.js
和 about-about-module.js
:
该路由器还注册了模块的路由声明,以便在您导航到与任何预加载模块相关联的网址时,可以瞬时完成转换。
使用 Quicklink 预加载策略
PreloadAllModules
在很多情况下都很有用。但是,当您有数十个模块时,其积极预加载确实可能会增加网络使用量。此外,由于路由器需要在所有预加载模块中注册路由,因此可能会在界面线程中产生密集的计算,并导致用户体验缓慢。
quicklink 库可以为大型应用提供更好的策略。它使用 IntersectionObserver API 仅预加载与页面上当前显示的链接相关联的模块。
您可以使用 ngx-quicklink 软件包将快速链接添加到 Angular 应用。首先,从 npm 安装软件包:
npm install --save ngx-quicklink
一旦在项目中使用 QuicklinkStrategy
,您就可以通过指定路由器的 preloadingStrategy
并导入 QuicklinkModule
来使用它:
import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…
@NgModule({
…
imports: [
…
QuicklinkModule,
RouterModule.forRoot([…], {
preloadingStrategy: QuicklinkStrategy
})
],
…
})
export class AppModule {}
现在,当您再次打开该应用时,您会注意到路由器仅预加载 nyan-nyan-module.js
,因为位于页面中心的按钮具有指向它的路由器链接。打开侧边导航栏时,您会发现路由器预加载了“关于”路线:
在多个延迟加载模块中使用 Quicklink 预加载策略
上面的示例适用于基本应用,但如果您的应用包含多个延迟加载的模块,您就需要将 QuicklinkModule
导入到共享模块中,导出该模块,然后将共享模块导入延迟加载的模块。
首先,将 QuicklinkModule
从 ngx-quicklink
导入到共享模块中,然后将其导出:
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 搭配使用。
总结
使用路线级代码拆分时,如需加快导航速度,请执行以下操作:
- 根据应用的大小选择合适的预加载策略:
- 模块较少的应用可以使用 Angular 的内置
PreloadAllModules
策略。 - 包含许多模块的应用应使用自定义预加载策略(例如 Angular 的快速链接)或预测性预加载(如 Guess.js 中所实现的那样)。
- 模块较少的应用可以使用 Angular 的内置
- 通过设置 Angular 路由器的
preloadStrategy
属性来配置预加载策略。