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...