前言
::: warning
众所周知，通常情况下Vite要比Webpack快，但经过实际感受，默认情况下，Vite项目的启动速度确实很快，但如果某个界面是第一次进入，且依赖比较多或者比较复杂的话，就会很慢，这篇博客来讨论一下这个问题（Vite2.x版本）。
:::
Vite到底是快还是慢？
::: tip
单方面说Vite快太过笼统，但Vite项目的启动确实非常快(这里的启动指的是命令行启动完毕，而不是页面加载完毕的时间)
但启动完之后，打开首页，如果依赖的资源比较多，那么有可能慢到让你怀疑人生
简单来说，Vite之所以启动那么快，是因为它启动时不会像Webpack那样对所有代码进行编译/打包/压缩，而是采用bundless的思路，启动时只进行第三方依赖的预构建，实际浏览器访问的时候，再通过本地服务器实时转换每个请求的文件，达到缩短首次启动时间的目的。
关于Vite的具体原理可以参考: Vite原理与实践记录
:::
对Vite启动后页面加载的过程进行分析
::: tip
- 打开浏览器开发者工具，可以看到请求了很多的资源
-
终端中也会显示:
[vite] new dependencies found: axios, updating...[vite] ? dependencies updated, reloading page...
- 同时，界面会被强制刷新一次
:::
具体的性能分析可参考下面这篇文章:
Vite首次启动加载慢文章来源：https://www.toymoban.com/news/detail-632556.html
解决方案
在Vite2.x之前
::: tip
官方文档中有简单提到这个问题的解决方式：Vite官网: 依赖优化选项
总之就是在vite.config.ts中进行配置，让Vite能在启动之初就对某些资源进行预打包，避免启动完成后再进行动态打包。
:::
{
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，会看到多了Pre-bundling dependencies的信息:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-taH5H6GJ-1690992109265)(https://fastly.jsdelivr.net/gh/Ocean-H1/blog_image_bed/202303151716355.png)]
::: tip
但实际上，每次都进行手动配置太麻烦，也增加了开发人员的心智负担,在Vite2.x之前，可以使用插件来进行配置。
NPM: vite-plugin-optimize-persist
:::
插件使用
npm i -D vite-plugin-optimize-persist vite-plugin-package-config
在 vite.config.ts中配置Plugins:
// vite.config.ts
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'
export default {
plugins: [
PkgConfig(),
OptimizationPersist()
]
}
::: warning
注意： 首次加载的时候，依然会很慢，这个是正常现象，因为这个插件, 加快vite载入界面速度的原理, 也和上面说的一样，而第一次，这个插件也没法知道，哪些依赖需要预构建，他只是在vite动态引入资源的时候，将这些资源都记录下来，自动写入了package.json中，当再次启动项目的时候，插件会读取之前他写入在package.json中的数据，并告知vite，这样vite就能对这些资源进行预构建了，也就能加快进入界面的速度了，但相应的启动速度就会比原来稍微慢一点
实际上，vite第二次启动本来就有缓存，本来就会比第一次快，那这个插件岂不是没有意义了？当然还是有意义的，如果在这之后，被人再拿到你的源代码，因为package.json中已经有了预构建配置了，所以，他的vite在第一次启动时，就能对资源进行预构建了，另外，如果你由于某些原因需要删除node_modules/.vite这个缓存目录, 由于有这个插件，你的这次首次启动也会快起来
:::
参考链接：
Vite原理与实践记录
Vite首次启动加载慢
:::
参考链接：
Vite原理与实践记录
Vite首次启动加载慢
Vite解决项目刷新慢问题(请求量过大)文章来源地址https://www.toymoban.com/news/detail-632556.html
到了这里，关于Vite首次启动慢的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
