问题描述
当你首次启动 vite 时,Vite 会执行的所谓的“依赖预构建”( vitejs.cn/guide/dep-p…),每当打开新的页面,如果该页面使用到了新的依赖,界面就会被强制刷新一次,终端显示如下:
这是因为,Vite 运行时发现了新的依赖,随之重新进行依赖预构建,并刷新页面。这个过程也叫二次预构建。 在一些比较复杂的项目中,这个过程会执行很多次,二次预构建的成本也比较大,不仅需要把预构建的流程重新运行一遍,还得重新刷新页面,并且需要重新请求所有的模块,尤其是在大型项目中,这个过程会严重拖慢应用的加载速度。
如果依赖越来越多,或者在特殊情况下,需要删除node_modules重新安装依赖启动页面时,这个情况会更明显,所谓的vite快,也就不以为然了,其实真是情况是:vite启动项目要比webpack快,但是首次加载页面,并且依赖较多时,没有进行预构建就会比较慢。
页面的渲染时间和webpack项目的渲染时间差不多,esm 的形式被浏览器加载和请求数量对页面的渲染时间的影响不是主要的,也证实项目启动后浏览器第一次加载多出的时间主要是在编译上。 相关链接:github.com/vitejs/vite…
打开新的页面时:加载新的模块会报408,并触发页面刷新,element 相关依赖需要重新获取:
解决方案1:
配置 vite的optimizeDeps,将需要预构建的依赖配置进去
缺点:每次添加新的依赖都需要手动更新该配置
最终解决方案:
使用vite-plugin-optimize-persist 插件自动配置,www.npmjs.com/package/vit…
安装之后,package.json就会自动添加进预构建的依赖,如图:
配置完成之后,首次加载页面会快很多,因为已经预先构建了相关依赖,并且是存储在硬盘中的缓存
如果打开新的页面中,相关依赖已经加载过之后,只需请求页面中新的组件即可