LobeHub 的 Vite 路由模块预热实践
LobeHub 项目在构建和运行时遇到了路由模块加载的性能瓶颈。文章详细阐述了其采用的 Vite 路由模块预热实践，旨在通过主动加载机制优化用户体验。核心问题在于使用 React Router 的路由懒加载功能时，用户首次访问某个页面会因动态导入 JavaScript 模块而产生可感知的等待时间，出现白屏或加载状态。解决方案分为两个层面：首先是编译时预热，在 Vite 构建阶段通过自定义插件分析路由配置，生成一份包含关键路由及其关联依赖的清单；其次是运行时预热，在应用初始化时，根据该清单主动发起这些模块的请求并进行缓存。文章具体介绍了如何编写 Vite 插件来遍历路由树并提取模块信息，以及如何利用前端路由守卫或自定义钩子来触发预加载。实践表明，该方案能有效减少关键页面的首次加载时间，尤其对复杂路由结构和大型应用提升显著，同时兼顾了首屏加载性能与后续导航的流畅性。