一、为什么
最近公司新启动一个B端项目，之前的项目都是使用webpack来作为打包工具。但是我发现一个项目的本地构建时间竟然要50s，因此决定尝试一下使用vite来重新搭建一个项目。
但是！！！！当我兴致勃勃把框架搭好时发现，本地的构建时间确实提高了很多，大概在4s左右。但是，当我打开浏览器，我的页面竟然迟迟没有渲染完成。
可以看到本地的构建时间只有3s
但是在页面渲染期间，等待response的时间却有20s
二、排查过程
我开始找到底是哪个文件阻塞了页面渲染，筛选了一下发现是ant-design-vue以及pinia持久化的插件，并且阻塞的时间是在waiting中，即等待响应时间。另外在没有添加任何业务代码的情况下，总共发出了62个请求如下图：
然后我开始疯狂百度搜索为什么，得到的答案都差不多，当按需引入ant-design-vue时，vite并不会预构建antd相关的样式文件，并且在终端启动后会提示有哪些文件可以进行预构建（这里没有图。。。 在git上尤大大也回答过类似问题：
然而在网上似乎也有前篇一路的解决办法：使用vite-plugin-optimize-persist，但是不知道是我配置的原因还是什么，我使用这个插件并不生效。
三、峰回路转
就在我苦恼，要不要放弃使用vite时，在git上看见这样一个问题github.com/vbenjs/vue-… 下方有一位大佬自己写了一个预构建的脚本：
我按着大佬的写法在我的项目根目录下加入这样的文件，并在vite.config.ts中引入，结果真出乎意料！我现在的页面首次渲染时间是这样的：
四、总结
- 使用一项新技术之前要先阅读完官方文档，或许可以提前发现一些坑，提前寻找一下解决办法。
- 遇到问题多去github或者官网找答案，势必有人会有同样的问题，即使没有解决办法，找到真正的原因也是有益处的。
- 至于我为什么使用vite-plugin-optimize-persist 不生效，我现在也不知道，有经验的大佬可以在评论区回答下。
- 第一次写文章，请嘴下留情~