处理Vite项目首屏加载响应迟缓和二次刷新的问题

简介: 处理Vite项目首屏加载响应迟缓和二次刷新的问题

由于Vite采用的bundless的dev server方案,且按原生ESM的形式按需为浏览器动态提供源码,也就形成了Vite冷启动迅速,但首屏首次加载慢(加载过程中进行解析、编译等,特别是在首屏需要引入体积大、格式特殊的文件时)的问题。


除此之外,在第一次启动时,如果在首页通过点击等交互操作准备进入到下一个包含新类库依赖的页面时,会出现响应迟缓、页面reload的情况。同样出现这类情况也是因为需要动态加载过程中的额外工作。


目前,对于上述问题的解决方案主要是通过触发冷启动时的预构建来解决:


1. 通过配置依赖优化项 optimizeDeps.include

2. 通过现有的npm包

npm i -D vite-plugin-optimize-persist vite-plugin-package-config
// vite.config.ts
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

export default {
  plugins: [
    PkgConfig(),
    OptimizationPersist()
  ]
}

3. 如果方案2有兼容问题,可以参考其源码,自己编写插件的实现

相关文章
|
移动开发 小程序 JavaScript
uniapp指南第1章---如何创建一个uniapp项目
uniapp指南第1章---如何创建一个uniapp项目
432 0
|
5月前
|
缓存 前端开发 JavaScript
如何配置Vite以确保最佳的Tree Shaking效果?
如何配置Vite以确保最佳的Tree Shaking效果?
821 56
|
安全 开发者
vite中引入defineConfig类型辅助函数
【10月更文挑战第11天】 在 Vite 中,`defineConfig` 类型辅助函数用于以类型安全的方式配置项目。它接收一个包含服务器、构建、插件等配置项的对象作为参数,提供类型提示和检查,确保配置正确。通过 `defineConfig`,配置更清晰、易于维护和扩展,支持团队协作。示例:设置服务器端口为 3000,构建输出路径为 'dist'。
558 57
|
JSON 前端开发 算法
vite打包优化vite-plugin-compression的使用
【8月更文挑战第4天】vite打包优化vite-plugin-compression的使用
1588 4
|
缓存 监控 JavaScript
如何提高 Vue Render 函数的性能?
【10月更文挑战第4天】
215 0
|
缓存 JavaScript 前端开发
手写vite让你深刻了解Vite的文件加载原理
【8月更文挑战第3天】 手写vite让你深刻了解Vite的文件加载原理
384 4
手写vite让你深刻了解Vite的文件加载原理
|
前端开发 JavaScript
vite中css最佳实践:使用postcss完善项目中的css配置
【8月更文挑战第3天】使用postcss完善项目中的css配置
3369 1
|
容器
Vite项目当中的SVG图标的配置及图标全局组件的封装
Vite项目当中的SVG图标的配置及图标全局组件的封装
480 0
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Vue3使用Mitt中央事件总线实现组件之间通讯(发布订阅库)
Vue3使用Mitt中央事件总线实现组件间的发布订阅通信,替代了Vue2中已移除的EventBus。
1379 0