用于角度延迟加载的网络感知预加载策略
这篇文章解释了如何为延迟加载Angular Router制定网络感知预加载策略。
尽管存在用户网络状况,但它可以通过延迟加载改善用户体验。
什么是预加载?
预加载是Angular Router的延迟加载的一个重要特性。这是自2.0.0以来的第一个稳定版本。
默认情况下,当应用程序使用延迟加载时 loadChildren
,chunked懒模块将按需加载。它可以减少初始包大小,但用户必须等待转换时加载块。
预加载改变了。通过预加载,应用程序将在需要之前开始加载分块模块。它可以通过平滑过渡改善用户体验。
这是关于Victor Savkin在Angular中预加载的最佳文章。他是该功能的作者。
角度路由器:预加载模块
预加载策略
Angular Router支持使用自定义预加载行为 PreloadingStrategy
特征。有两种内置策略; PreloadAllModules
和 NoPreloading
。
NoPreloading
是不预加载任何模块的默认行为。
PreloadAllModules
引导后立即加载所有延迟模块。换句话说,这是“尽快”战略。
进口 { RouterModule, NoPreloading, PreloadAllModules } 从 '@角/路由器; @NgModule({ 进口: ( RouterModule。forRoot(路线, { preloadingStrategy: PreloadAllModules, //或NoPreloading }), ) }) 类 AppRoutingModule {}
PreloadingStrategy
是一个实现的简单类对象 预紧
方法。因此,我们可以轻松地制定自定义预加载策略,如下所示。
该 预紧
方法有两个参数; 路线
和 加载
。 路线
是您声明的路径对象 路线
阵列。 加载
是一个触发加载模块的函数。
// custom-preloading-strategy.ts 进口 { PreloadingStrategy, 路线 } 从 '@角/路由器; 进口 { 可观察, EMPTY } 从 'rxjs'; @注射({ providedIn: '根' }) 出口 类 CustomPreloadingStrategy 器物 PreloadingStrategy { 预紧(路线: 路线, 加载: () => 可观察<任何>): 可观察<任何> { 如果 (shouldPreload(路线)) { 返回 加载(); } 其他 { 返回 EMPTY; } } } // app-routing.module.ts @NgModule({ 进口: ( RouterModule。forRoot(路线, { preloadingStrategy: CustomPreloadingStrategy, }), ) }) 类 AppRoutingModule {}
预加载问题:网络成本
预加载可以改善用户体验,但仅限于设备在快速网络中使用的情况。有时移动设备具有窄带网络连接。如果那时应用程序尝试尽快预加载所有模块,它会以一种糟糕的方式影响其他连接,如AJAX。
对于拥有强大网络的用户,预加载是一种合适的解决方案。如果他们不这样做,按需加载会更好。但是这种情况可以非常动态地改变,因此应用程序必须在运行时获取网络信息并打开/关闭预加载。
我称之为“网络感知预加载策略”。
使用网络信息API
Network Information API是一种新的Web标准API提议。 Network Information API提供有关系统连接的信息。
整个API包括添加 NetworkInformation
接口和单个属性 航海家
接口: Navigator.connection
。由于此API尚未成为标准,因此TypeScript没有其类型定义。所以我创造了那个 网络信息类型
包,它在下面的所有示例代码中使用。
lacolaco / network-information-types
网络信息API的类型定义
网络信息类型
网络信息API的类型定义
警告
这是一个临时解决方案,直到TypeScript添加对此API的支持作为内置类型。请参阅https://github.com/Microsoft/TypeScript/issues/27186。
用法
- 通过npm安装包
- 编辑你的tsconfig.json
- 现在你明白了
navigator.connection
与它的类型
安装
$yarn add -D network-information-types
tsconfig.json
网络信息类型
是一种修改全局的环境类型 航海家
类型,所以它必须添加 类型
。
包名称 类型
数组解析 typeRoots
。默认情况下, typesRoots
只是 ./node_modules/@types
解决 网络信息类型
包,直接添加相对路径,如下所示。
{ “compilerOptions“:{ ... “类型“:( “./node_modules/network-information-types“ )}}
使用类型
现在你可以访问了 navigator.connection
财产 NetworkInformation
宾语。
navigator.connection
并且它的属性都是可选的,因为每个浏览器的支持是分开的。请参阅https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation#Browser_compatibility。
// 示例:http://wicg.github.io/netinfo/#example-1 如果 (航海家。连接)
…在GitHub上查看网络感知PreloadingStrategy
让我们使用Network Information API制作网络感知预加载策略以下代码定义 shouldPreload
上面使用的功能 CustomPreloadingStrategy
例。
navigator.connection
登陆有限的浏览器。所以我们必须检测这个特征。在这种情况下,
出口 功能 shouldPreload(路线: 路线): 布尔 { //获取NetworkInformation对象 常量 康恩 = 航海家。连接; 如果 (康恩) { //使用网络信息 } 返回 真正; }
检测“保存数据”模式
首先,“保存数据”模式应优先考虑最佳。这意味着用户非常关心有效负载大小的成本或性能约束。使用 NetworkInformation.saveData
财产和回报 假
。
出口 功能 shouldPreload(路线: 路线): 布尔 { //获取NetworkInformation对象 常量 康恩 = 航海家。连接; 如果 (康恩) { //保存数据模式 如果 (康恩。保存数据) { 返回 假; } } 返回 真正; }
检测“2G”连接
Network Information API可以识别网络的有效连接类型; 4G,3G,2G和慢速2G。
在此示例中,应用程序在用户处于2G网络时禁用预加载。
出口 功能 shouldPreload(路线: 路线): 布尔 { //获取NetworkInformation对象 常量 康恩 = 航海家。连接; 如果 (康恩) { //保存数据模式 如果 (康恩。保存数据) { 返回 假; } //'slow-2g','2g','3g'或'4g' 常量 effectiveType = 康恩。effectiveType || “”; // 2G网络 如果 (effectiveType。包括('2g' 上)) { 返回 假; } } 返回 真正; }
Network Information API还有其他几个属性 RTT
(RTT,连接的往返时间)。您可以为应用程序添加更多检查。
结论
- 角度路由器从2.0.0开始就支持预加载功能,这是第一个稳定版本。
- 您可以创建自己的自定义预加载策略
- 预加载仅对具有快速网络的用户有效。
- 网络信息API在多个浏览器中可用。
- 制作网络感知预加载策略非常容易。
谢谢你的阅读