用于角度延迟加载的网络感知预加载策略

这篇文章解释了如何为延迟加载Angular Router制定网络感知预加载策略。

尽管存在用户网络状况,但它可以通过延迟加载改善用户体验。

什么是预加载?

预加载是Angular Router的延迟加载的一个重要特性。这是自2.0.0以来的第一个稳定版本。

默认情况下,当应用程序使用延迟加载时 loadChildren,chunked懒模块将按需加载。它可以减少初始包大小,但用户必须等待转换时加载块。

预加载改变了。通过预加载,应用程序将在需要之前开始加载分块模块。它可以通过平滑过渡改善用户体验。

这是关于Victor Savkin在Angular中预加载的最佳文章。他是该功能的作者。

角度路由器:预加载模块

预加载策略

Angular Router支持使用自定义预加载行为 PreloadingStrategy 特征。有两种内置策略; PreloadAllModulesNoPreloading

NoPreloading 是不预加载任何模块的默认行为。

PreloadAllModules 引导后立即加载所有延迟模块。换句话说,这是“尽快”战略。

进口 { RouterModule NoPreloading PreloadAllModules }  '@角/路由器;  @NgModule({   进口      RouterModuleforRoot路线 {       preloadingStrategy PreloadAllModules //或NoPreloading     }),    })  AppRoutingModule {} 

PreloadingStrategy 是一个实现的简单类对象 预紧 方法。因此,我们可以轻松地制定自定义预加载策略,如下所示。

预紧 方法有两个参数; 路线加载路线 是您声明的路径对象 路线 阵列。 加载 是一个触发加载模块的函数。

// custom-preloading-strategy.ts 进口 { PreloadingStrategy 路线 }  '@角/路由器; 进口 { 可观察 EMPTY }  'rxjs';  @注射({ providedIn '根' }) 出口  CustomPreloadingStrategy 器物 PreloadingStrategy {   预紧路线 路线 加载 () => 可观察<任何>): 可观察<任何> {     如果 shouldPreload路线)) {       返回 加载();     } 其他 {       返回 EMPTY;     }   } }  // app-routing.module.ts @NgModule({   进口      RouterModuleforRoot路线 {       preloadingStrategy CustomPreloadingStrategy     }),    })  AppRoutingModule {} 

预加载问题:网络成本

预加载可以改善用户体验,但仅限于设备在快速网络中使用的情况。有时移动设备具有窄带网络连接。如果那时应用程序尝试尽快预加载所有模块,它会以一种糟糕的方式影响其他连接,如AJAX。

对于拥有强大网络的用户,预加载是一种合适的解决方案。如果他们不这样做,按需加载会更好。但是这种情况可以非常动态地改变,因此应用程序必须在运行时获取网络信息并打开/关闭预加载。

我称之为“网络感知预加载策略”。

使用网络信息API

Network Information API是一种新的Web标准API提议。 Network Information API提供有关系统连接的信息。

整个API包括添加 NetworkInformation 接口和单个属性 航海家 接口: Navigator.connection 。由于此API尚未成为标准,因此TypeScript没有其类型定义。所以我创造了那个 网络信息类型 包,它在下面的所有示例代码中使用。

GitHub标志lacolaco / network-information-types

网络信息API的类型定义

网络信息类型

npm版本

网络信息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在多个浏览器中可用。
  • 制作网络感知预加载策略非常容易。

谢谢你的阅读

资讯来源:由0x资讯编译自DEV,原文:https://dev.to/lacolaco/network-aware-preloading-strategy-for-angular-lazy-loading-4hae ,版权归作者所有,未经许可,不得转载
你可能还喜欢