关于前端: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

从表中能够看出，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']
    }
})

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

总结

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

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