关于前端:routeresourcepreload-拆包尽最大努力减少首屏幕加载资源并提供优质的用户体验

route-resource-preload

🚀 专一于晋升利用首屏加载速度,提供最佳用户体验,灵感来自NextJS的预加载.

为什么你须要 route-resource-preload ?

  • 拆分模块按需加载,晋升利用首屏加载体验.
  • 尽最大致力地去缩短动静导入组件的加载工夫以提供最佳交互体验.
  • 反对主动预加载资源(JS / Component / Module-Federation / UMD / Svg / Png 等).
  • 反对手动调用预加载.
  • 齐备的 typescript 反对.

route-resource-preload 与 webpack-prefetch/preload 或 loadable-component 有什么不同?

  • 能够更细节(鼠标 hover 时加载、呈现在视图内时加载、visible 时加载、页面初始化时加载)处管制何时何处进行资源预加载
  • 反对预加载Module-Federation
  • 反对预加载更多动态资源类型

测试 DEMO

惯例组件应用成果比照

失常懒加载一般组件 及 Module-Federation

route-resource-preload 预加载一般组件 及 Module-Federation

资源 失常懒加载(ms) 预加载 (ms)
一般组件 (单个资源文件) 184 1
Module-Federation 组件 (6个资源文件) 405 8

从表中能够看出,route-resource-preload 预加载显着晋升了组件的加载速度,尤其是对于简单的组件,加载速度的晋升更为显著。 这阐明在简单的业务场景下,预加载能够显着晋升组件加载速度和用户体验.

以上是惯例组件预加载时的比照成果

模态弹窗组件应用成果比照

const Modal = useMemo(()=> dynamic({
    visible, // false 时,不进行资源预加载
    loader: () => import('antd/es/modal'),
    loading: () => <>loading...</>,
}),[visible])
失常懒加载模态弹窗

route-resource-preload 预加载模态弹窗

此处有两个http申请,是因为预加载配置了两个组件。

new RouteResourcePreloadPlugin({
    modulePreloadMap: {
      "/A": ["../components/A",'antd/es/modal']
    }
})

资源 失常懒加载(ms) 预加载 (ms)
模态弹窗 (单个资源文件) 271 45

基于route-resource-preload ,能够让模态弹窗组件 visible 为 true 时,才进行资源预加载,为 false 时,不预加载,缩小利用首屏 http 申请数,基于预加载机制,在保障页面性能的同时,不影响用户的交互体验。

总结

route-resource-preload 的指标是在不影响用户交互体验的同时,尽可能的晋升利用性能。🚀 🚀 🚀

心愿 route-resource-preload 能对你的我的项目有所帮忙,后续还将继续摸索 vite 中的应用以及对 vue 的反对,如果你有好的想法,欢送共建。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据