处理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项目
582 0
|
JavaScript
Rspack 创建 vue2/3 项目接入 antdv(rspack.config.js 配置 less 主题)
Rspack 创建 vue2/3 项目接入 antdv(rspack.config.js 配置 less 主题)
715 0
|
JavaScript 算法 前端开发
vue + echarts实现国省市三级下钻联动
vue + echarts实现国省市三级下钻联动
1070 0
|
编译器 定位技术 API
|
11月前
|
缓存 前端开发 JavaScript
如何配置Vite以确保最佳的Tree Shaking效果?
如何配置Vite以确保最佳的Tree Shaking效果?
1484 57
|
3月前
|
缓存 前端开发 JavaScript
首屏优化实践:如何将 Vue3 + Vite 项目的加载速度提升3倍
本篇博客,将会带着你,走一遍首屏优化实践。手把手给你演示,如何将 Vue3 + Vite 项目的加载速度提升3倍。
418 6
首屏优化实践:如何将 Vue3 + Vite 项目的加载速度提升3倍
|
前端开发 JavaScript
vite中css最佳实践:使用postcss完善项目中的css配置
【8月更文挑战第3天】使用postcss完善项目中的css配置
4146 1
|
前端开发 JavaScript
【前端用法】前端JS获取视频时长的写法
【前端用法】前端JS获取视频时长的写法
752 0
|
UED
使echarts图例legend只选中一个(selectedMode)
本文介绍了如何在ECharts图表中设置图例(legend)的选中模式为单选('single'),以确保在有多个图例时,用户只能选择一个图例项进行展示,从而提升图表的可读性和用户体验。
1777 2
使echarts图例legend只选中一个(selectedMode)
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
2734 0