《Vue3+TS》Vite的初体验及和webpack的初比对

大家好，这次分享的内容主要是关于vite的，最近确实看到好多人在推荐vite，然后clone了element plus的源码，发现了其打包的方式好像也是vite，这也就促使了我去初步窥探它的神秘…

前言

Vite，发音 /vit/，可以说是今年大火的一个前端构建工具，其实在推出1.0版本的时候就可以初步的看出其功能的强大，只不过一直仅限于关注一下的状态，并未主动尝试去了解学习，随着尤大的近来的一再推荐，甚至直言用了vite就再也回不去webpack了之后就彻底点燃了我的兴趣，好吧，我也要学习一下（PS：卷不动了，卷不动了，大佬们不要动不动就彻底新干一个东西出来了，来不及学…）；

本文主要讲述了初次体验Vite的感受以及初步和webpack做了比对，期望通过本文能对Vite有一个简单认知，另外，本文的体验以及比对其实并没有足够的严谨，所以仅限参考，并不作数；

Vite

在开始之前，先得了解Vite是什么？就像学webpack之前得先了解webpack是什么一样，用官网的话说，就是：这是一个新的前端构建工具，能够显著提升前端开发体验，它由两部分组成：

1. 一个开发服务器，我们可以以本地静态服务器的方式启动一个项目，这点和webpack一致，主要用于本地开发者模式下开发代码，在这一点上官网特别强调了它速度快到惊人的 热更新模块，好的，记一下，等一会测一下到底多块；
2. 一套构建指令，简单的说，这个就是打包，这一点根据官网介绍它是使用 Rollup 实现的（至于Rollup是什么，可以看它的官网：Rollup官网，简单的说就是一个模块打包器，和webpack中的打包功能类似）；

那么到这里其实就知道了Vite是一个构建工具，它具有的功能和webpack非常接近，只是说它在某些方便比webpack更具有各种优势才导致它大火；

安装命令比对

既然是构建工具，那么总归需要其初始化本地项目，比如初始化一个Vue的项目，先比对一下安装命令吧

webpack安装

vue create 应用名称

Vite

npm init vite@latest

可以看出，webpack的安装是基于了vue-cli的，而vite的安装则是直接使用了npm，据说vite内置了vue的脚手架，因此可以直接init，另外，当我们初始化项目的时候，只选择Vue3+TypeScript，其他所有选项，包括Vue的全家桶，CSS预处理器等等都不选来测试模版的初始化时间，虽然这种比对没有严格安装测试规则，但也一定程度的说明了问题；
webapck初始化的时间：约等于38.7秒

Vite，Vite有点和webpack不一样，webpack在初始化的时候会直接将依赖包也就是modules安装好，而vite则仅仅是安装好模版，需要用户自己cd进目录下重新npm install
Vite初始化的时间：9.13+16.6约等于27.7秒

很明显，在初始化的速度上vite远远领先；

安装步骤比对

使用webpack进行安装的时候，会有很多步骤需要你进行手动选择，比如这种

脚手架会提示你需要安装哪些内容，比如安装vuex，安装css预处理器等等，但是vite不一样，它只能选择模版，如下

由于安装的模版较为纯净，因此，如果需要使用到vuex、vuerouter等等，那么就需要手动进行npm的install或者yarn add;
另外，vite的项目貌似只能跟Vue3进行绑定，它不能生成vue2的项目，这就代表了想要使用vite那么项目必须是基于vue3进行开发的；
这一块我个人觉得，我还是比较喜欢webpack，感觉更方便些，当然也有可能是我用习惯了；

打包体积比对

我们就直接以这个空项目进行打包，看一下最终的部署包体积大小，cd到指定目录下后进行build

webpack	Vite

嗯哼…体积差了10倍，这个差距就有点太大了，太夸张了，当然，也有可能由于模版的不同导致了内容的不同，嗯，不着急，继续比对一下，看看工程目录是否有较大差异，导致了最终的体积差距；

webpack	Vite

看了下工程目录，貌似也没有大的内容差异，最主要的区别就在与index.html文件，从public文件下移动到了根目录下，那么这就一定程度的说明确实这边vite由于一些特殊的原因导致它打包的体积较小；

启动速度对比

重头戏来了，因为官网的例子中直接点名了热更新的速度非常快，让我们看看到底多快，分别执行启动命令
webpack 空项目下，启动使用时间大致为2934ms，个人感觉差不多，并且随着项目变大，启动时间越来越慢，这是正常现象，可以理解

vite：在空项目下执行命令，npm run dev，…启动时间约为：746ms，是webpack时间的四分之一，也就是webpack的启动时间是vite的4倍，这也有点夸张，着实略微震惊；

在这一块，确实如官网所说，vite比webpack强大太多了，随着项目的变大，webpack的启动时间会越来越长，在某种程度上这已经变成了一种默认的规则，如果说vite能突破这种规则，那真的是非常厉害了…（优点好奇内部是怎么实现的…后续有机会研究一下）

packjson.json内容比对

由于两者都是空项目，那么默认依赖包其实差距不大，基本都没有什么额外的安装
webpack

{
  "name": "demo1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "~4.5.4",
    "@vue/cli-service": "~4.5.4",
    "@vue/compiler-sfc": "^3.0.0",
    "typescript": "~4.1.5"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

vite

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vue-tsc": "^0.34.7"
  }
}

两者其实没什么差距，都比较干净；

小结

本文简单的初步的了解了一下Vite，并在一些方面和webpack做了一些简单的比对，结果大致如下：

• 安装时间上，vite的时间短于webpack；
• 安装步骤上，个人喜欢webpack大于vite；
• 打包体积上，vite build后的包体积远小于webpack；
• 启动速度上，或者说热更新的速度上，vite的时间远快于webpack；

因此，正如本文开头所说，vite确实在某些方便要远好于webpack、但webpack的强大还在于其丰富多样的生态，插件，因此，我个人的话会暂时依旧使用webpack作为项目的打包工具，而对于vite则会持续处于观察状态，直到大佬们将其真的应用于中大型项目中并得到实践后，才所有改变；