vite首次打开界面加载慢问题解决
写在前面
网上都说vite要比webpack快,但个人感受,默认情况下, vite项目的启动确实比webpack快,但如果某个界面是首次进入,且依赖比较多/比较复杂的话,那就会比较慢了。
这篇文章就是用来记录,关于vite慢的相关问题与可能的解决方案
为什么说vite快?为什么说vite慢?
只说vite快那太过笼统,但vite项目的启动确实是快(注意这里的启动是指命令行启动完毕,不是指启动完之后首页加载完毕
)
启动完之后,你打开首页,你可能就不一定觉得vite快了(我之前就时常在自我怀疑,是不是我vite的打开方式不对,怎么这么慢????
),如果依赖的资源比较多,那速度有时慢的感人
可以简单的认为,vite之所以启动快,是因为vite启动时并不会像webpack一样对所有代码进行编译/打包/压缩, 他只会对一小部分代码进行一些简单的处理,剩余的工作都交给浏览器,以及运行时进行依赖分析,动态打包,动态引入
具体原因/原理可见:vite原理与实践记录
对vite慢的分析与尝试解决
vite启动快的原理,也导致了他在加载依赖项很多,很复杂的页面时,页面打开慢。因为他要进行一系列的动态分析/动态资源引入/动态编译。
vite慢的表现
vite的慢的时候,会有什么表现呢?
- 从web开发者工具的network选项卡中,会看到请求了很多资源
- 终端(CMD)中也会显示, 类似这样的文字:
[vite] new dependencies found: axios, updating...
[vite] ? dependencies updated, reloading page...
- 界面会被强制刷新一次
表现如下图
如下两篇文章也是对vite慢的记录,以及一定的分析:
vite首次启动加载慢
Vite 解决项目刷新慢问题
对于vite慢有没有解决办法?
慢的主要原因是vite需要动态的解析依赖,并打包,引入。其中打包又可能是慢中之慢。
可能的原因找到了,那就看vite官方有没有提及解决办法,还好官方文档中有提及这个,只是写的不详细:VITE官网:依赖优化选项
解决方案
总之就是通过添加类似如下的配置,让vite在启动之初就对某些资源进行预打包,尽量避免后续的动态打包,示例配置如下
vite.config.ts
{optimizeDeps: {include: ['vue','map-factory','element-plus/es','element-plus/es/components/form/style/index','element-plus/es/components/radio-group/style/index','element-plus/es/components/radio/style/index','element-plus/es/components/checkbox/style/index','element-plus/es/components/checkbox-group/style/index','element-plus/es/components/switch/style/index','element-plus/es/components/time-picker/style/index','element-plus/es/components/date-picker/style/index','element-plus/es/components/col/style/index','element-plus/es/components/form-item/style/index','element-plus/es/components/alert/style/index','element-plus/es/components/breadcrumb/style/index','element-plus/es/components/select/style/index','element-plus/es/components/input/style/index','element-plus/es/components/breadcrumb-item/style/index','element-plus/es/components/tag/style/index','element-plus/es/components/pagination/style/index','element-plus/es/components/table/style/index','element-plus/es/components/table-column/style/index','element-plus/es/components/card/style/index','element-plus/es/components/row/style/index','element-plus/es/components/button/style/index','element-plus/es/components/menu/style/index','element-plus/es/components/sub-menu/style/index','element-plus/es/components/menu-item/style/index','element-plus/es/components/option/style/index','@element-plus/icons-vue','pinia','axios','vue-request','vue-router','@vueuse/core',],}
}
配置完之后,vite的启动也会和原来有点不同, 终端(CMD)中会多出Pre-bundling dependencies
的信息
最终解决方案
上面的解决方案,确实可以解决vite慢的问题,但每个项目都要进行这么一通配置,还是比较繁琐的,还好有开发者,写了相应插件来避免人工写这一堆配置
NPM: vite-plugin-optimize-persist
插件使用
npm i -D vite-plugin-optimize-persist vite-plugin-package-config
vite.config.ts
中增加配置
// vite.config.ts
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'export default {plugins: [PkgConfig(),OptimizationPersist()]
}
注意: 首次加载的时候,依然会很慢,这个是正常现象,因为这个插件, 加快vite载入界面速度的原理, 也和上面说的一样,而第一次,这个插件也没法知道,哪些依赖需要预构建,他只是在vite动态引入资源的时候,将这些资源都记录下来,自动写入了
package.json
中,当再次启动项目的时候,插件会读取之前他写入在package.json
中的数据,并告知vite,这样vite就能对这些资源进行预构建了,也就能加快进入界面的速度了,但相应的启动速度就会比原来稍微慢一点
package.json
看到这里你可能会想,vite第二次启动本来就有缓存,本来就快,那这个插件岂不是没有意义了?当然还是有意义的,如果在这之后,被人再拿到你的源代码,因为package.json
中已经有了预构建
配置了,所以,他的vite在第一次启动时,就能对资源进行预构建
了,另外,如果你由于某些原因需要删除node_modules/.vite
这个缓存目录, 由于有这个插件,你的这次首次启动
也会快起来。
参考文章
vite首次启动加载慢
Vite 解决项目刷新慢问题
VITE官网:依赖优化选项
vite原理与实践记录
几个插件,让你的Vue代码 “学会” 自动按需引入
vite首次打开界面加载慢问题解决相关推荐
- 解决google chrome刚打开后加载网页慢的问题
不知道有没有小伙伴和我一样最近每次打开Google chrome的时候都会面临加载网页慢的问题,比如使用百度搜索一直搜索不出来.为此我也百度了很多,有说关gpu硬件加速的,千奇百怪我试了都没用.最后我 ...
- Qt界面加载网络摄像头,并实时显示,两种更新界面的方法
Qt界面加载网络摄像头,并实时显示,两种更新界面的方法 1.Qt界面加载网络摄像头,并实时显示,根据头文件中的宏定义来区分使用哪种方式.①Qt信号槽更新界面,②c语言回调方式更新界面 2.使用Open ...
- c#winform窗口页面一打开就加载的方法
//页面一打开就加载这个方法this.Load += new EventHandler(SQLGetTime_Load); 文本框设置默认值,一打开就显示 private String text1 = ...
- web项目中js加载慢问题解决思路
web项目中js加载慢问题解决思路 参考文章: (1)web项目中js加载慢问题解决思路 (2)https://www.cnblogs.com/cslj2013/p/8491786.html 备忘一下 ...
- transformers.Trainer 在训练中断后无法加载checkpoint问题解决
transformers.Trainer 在训练中断后无法加载checkpoint问题解决 大家好,我是亓官劼(qí guān jié ),在[亓官劼]公众号.CSDN.GitHub.B站.华为开 ...
- chrome 浏览器 64位最新版 flash 无法加载插件 问题解决
chrome浏览器 64位最新版 flash 无法加载插件 问题解决 %USERPROFILE%\AppData\Local\Google\Chrome\User Data\PepperFlash 修 ...
- Android 11.0 Settings源码分析 - 主界面加载
Android 11.0 Settings源码分析 - 主界面加载 本篇主要记录AndroidR Settings源码主界面加载流程,方便后续工作调试其流程. Settings代码路径: packag ...
- win10浏览器加载很慢_win10加载网页很慢_win10打开浏览器加载网页很慢处理技巧...
win10加载网页很慢_win10打开浏览器加载网页很慢处理技巧 在当下用电脑办公很普遍了,相当一部份用户经历了xp,win7/win8/系统,现在又出了个win10系统,随着硬件的老化与win7支持 ...
- linux装百度网盘不能运行,百度网盘Linux版不能登录成功,打开一直加载的解决方法...
如果你安装了百度网盘Linux版,打开一直加载,一直不能登录成功,那请按照下面方法处理.如果你要在深度deepin系统中安装百度网盘,请到商店中去安装,已经上架百度网盘客户端了. 出现的状况及解决方法 ...
- Nexus私服仓库数据损坏 无法加载数据库问题解决
Nexus私服仓库数据损坏 无法加载数据库问题解决 快进到解决办法 周日为了解决另一个问题重启服务器导致Nexus私服仓库损坏,一直无法启动,记录一下解决方案 一开始根据Canot oppen loc ...
最新文章
- CCNA课堂练习二:路由协议EIGRP简单介绍与配置
- python transformers_transformers 安装
- OCM备考 一、Server config 之管理表空间
- eclipse中快捷键
- jQuery Easy UI Accordion(可伸缩的面板)包
- JSP Unable to compile class for JSP
- 固件是通用的吗_如何升级AirPods固件?
- Docker下安装Anaconda
- 杨澜给80后女孩子的14个忠告
- 基于python+django框架+Mysql数据库的新闻信息管理系统设计与实现
- 在win10下下载wsl
- c语言课程设计交通处罚单系统,交通处罚单管理系统课程设计.doc
- APP案例分析--扇贝单词
- ACE的CDR中的字节对齐问题
- 2010Execl冻结多行
- STM32F10xxx启动模式分析 – 梦想照旧
- 数学建模(1)-matlab之fprintf函数用法
- STM32单片机低功耗剖析
- 【智驾深谈】一张图看清自动驾驶产业
- 为什么都喜欢用Python?Python/PHP/Java全面对比