快速创建vite+vue3+ts项目及首次缓慢问题

vite推出之后，在国内火的一塌糊涂，在前端圈立马就卷了起来。我这撸着JQ项目的还没开始用过。公司用vite+vue3+ts的项目拿来跑了一下，第一次启动慢的我怀疑人生，后来才知道已经有插件解决了这个问题。

先用vite快速创建项目吧，现在快速创建项目的命令很多：

npm init vite-app <project name>

npm init @vitejs/app

两个命令都试了一下，都是可以创建的，创建出来的项目不太一样，第一个vite的版本是"vite": “^1.0.0-rc.13”，第二个是"vite": “^2.8.0”。vite官网也提供了命令，也有社区模板，提供了各种工具和不同框架的模板。这边使用官网推荐的命令：

npm init vite@latest

yarn create vite

使用npm会出现：

npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.

所以是建议使用@vitejs/app创建项目，命令不同， 结果都一样：

执行npm init @vitejs/app，会让你输入项目名

然后会让你选择vue、react等模板

vue里面有vue和vue-ts模板，选择vue-ts

进入项目，初始化，就可以启动了。项目什么东西都没有，启动非常快，首页访问也非常快，为了验证vite首次启动慢的问题，引入element-plus，然后做了按需加载，结果命令行启动：

访问的时候：

好家伙，用了14秒，页面还会报错然后显示，还不止这几个：

network有非常多的请求：

这只是新建的项目，只有一个element-plus，如果是开发项目，第一次路由跳转的时候，跳转不了，会直接刷新。

所以vite的快和慢到底是相对于什么？

vite的快：命令行启动快，官网的说法是，vite通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间，以 原生 ESM 方式提供源码，让浏览器接管了打包程序的部分工作，只需要在浏览器请求源码时进行转换并按需提供源码。而webpack需要在内存中编译、打包、压缩。

vite的慢：需要一次性请求太多的资源，而且这些资源有些并不是浏览器可以直接运行的，vite还需要动态的解析，然后一些需要打包再返回给浏览器。

vite也提供了解决的方法，依赖预构建，使用自定义行为的配置项optimizeDeps，

里面也提到了缓慢的原因：

https://vitejs.cn/guide/dep-pre-bundling.html

可以直接使用插件vite-plugin-optimize-persist，npm找这个包，有使用方法：

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

// vite.config.tsimport OptimizationPersist from 'vite-plugin-optimize-persist'import PkgConfig from 'vite-plugin-package-config'
export default {
  plugins: [
    PkgConfig(),
    OptimizationPersist()
  ]}

当你访问过一次之后，会在package.json生成：

当然，项目第一次访问依然是很慢的，只是之后别人拉取的代码有了这个预构建的配置，第一次就很快了。

可能也是自己没有做过vite官网描述的那种大项目吧，（包含数千个模块的大型项目，需要几分钟才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来）体会不到vite的精髓。

欢迎关注订阅号 coding个人笔记