route-resource-preload 拆包，尽最大努力减少首屏幕加载资源，并提供优质的用户体验

route-resource-preload

专注于不影响用户最佳体验的同时，提升应用首屏加载速度，灵感来自NextJS的预加载.

gif 效果图

正常懒加载.gif

route-resource-preload 预加载.gif

从上图可以发现，route-resource-preload 预加载后，视图上基本不会再出现 loading 的情况，相对于正常懒加载的 loading 时长，用户体验层面上有了较大的提升。

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

拆分模块按需加载，提升应用首屏加载体验.
尽最大努力地去缩短动态导入组件的加载时间（可以看作是 suspense loading 组件持续时间）以提供最佳交互体验.
支持自动预加载资源（JS / Component / Module-Federation / UMD / Svg / Png 等）.
支持手动调用预加载.
完备的 typescript 支持.

route-resource-preload 与 react.lazy 有什么不同？

route-resource-preload 在兼顾组件代码分割的同时，通过支持对组件的自动预加载及手动预加载，避免因为组件渲染延迟导致组件交互体验差。

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

可以更细节(鼠标 hover 时加载、出现在视图内时加载、visible 时加载、页面初始化时加载)处控制何时何处进行资源预加载
支持预加载Module-Federation
支持预加载更多静态资源类型

常规组件使用效果对比

`正常懒加载`普通组件及 Module-Federation

`route-resource-preload 预加载`普通组件及 Module-Federation

资源	正常懒加载(ms)	预加载 (ms)
普通组件 (单个资源文件)	184	1
Module-Federation 组件 (6个资源文件)	405	8

从表中可以看出，route-resource-preload 预加载显着提升了组件的加载速度，尤其是对于复杂的组件，加载速度的提升更为明显。这说明在复杂的业务场景下，预加载可以显着提升组件加载速度和用户体验.

以上是常规组件预加载时的对比效果

模态弹窗组件使用效果对比

模态弹窗被常规的方式(如 react.lazy)进行懒加载时，由于是渲染在视图内，会自动进行资源加载，基于route-resource-preload ，可以让模态弹窗组件 visible 为 true 时，才进行资源加载，为 false 时，不自动加载以减少应用首屏 http 请求数，同时基于预加载机制，在保证页面性能的同时，不影响用户对模态弹窗的交互体验。

`正常懒加载`模态弹窗

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

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

const Modal = useMemo(()=> dynamic({
    visible, // false 时，技术组件渲染在视图内，但不自动进行资源预加载，减少首屏非必要的 http 请求
    loader: () => import('antd/es/modal'),
    loading: () => <>loading...,
}),[visible])

<>
    
    {setVisible(true)}}>       
        PreLoad Modal

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

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

总结

route-resource-preload 的目标是Any code can be split，在不影响用户交互体验的同时，尽可能的提升应用性能`。

希望 route-resource-preload 能对你的项目有所帮助，后续还将持续探索 vite 中的使用以及对 vue 的支持，如果你有好的想法，请发表在此。

route-resource-preload 拆包，尽最大努力减少首屏幕加载资源，并提供优质的用户体验