乐趣区

关于前端: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 的反对,如果你有好的想法,欢送共建。

退出移动版