关于 Vite 的讨论一直都没有停过，到了 Vue3 的发布，热度直接到了最高点，一度被认为是下一代的构建工具。
既然评价这么高，不试用下怎么可以，毕竟前端圈子最出名的就是卷。
出现原因
在我们正式开始 vite 体验之前，我们先要了解下 vite 为什么会出现。
在前端刀耕火种的时候，大家都是手写 css/js，然后手动在后端 mvc 模板里添加引用，没有什么工程化的概念，前端角色定位只是页面仔。
后来 grunt/gulp 出现，然前端出现了模块化的概念。不同的功能模块通过 grunt/gulp 进行代码的编译、压缩，一定程度上有了工程化的雏形。
直到 webpack 的横空出世，前端开始了真正意义上的模块化开发，而 webpack 引入的构建流程，使得前端工程化已经变得成熟，直到目前为止，webpack 仍是最流行的构建工具，没有之一。
既然 webpack 这么强，那为什么尤雨溪还要开发 vite 这个构建工具呢？这不得不提到目前 webpack 所存在的一个非常大的问题——构建时间长
因为 webpack 总是要预先构建，所以任何的修改都会导致 webpack 做打包。如果项目非常大，引入的依赖非常多，首次构建就会花费非常多的时间，即使使用了的模块热更新(HMR)，文件修改也要等待构建完成才能反应到页面上。
漫长的初始构建时间导致了网上流传一个段子：上午到公司打开ide开始构建，接杯茶开始等待完成，一个上午就结束了。此时的开发者急需一个能快速构建的解决方案，此时，vite 出现了。
原理简述
vite 跟 webpack 之流最大的不同就是：开发模式下，它不做代码编译，它直接将我们的原生 esm 模块发给浏览器！
看到这你可能已经猜到了，vite 的快是借助了浏览器支持原生 esm 模块的特性。一个是编译打包之后再发给浏览器解释运行，一个是直接发给浏览器解释运行，你说哪个快？
虽然借助浏览器支持 esm 的特性，能让我们的启动速度变快，但是“理想很丰满，现实很骨感”，我们的生态圈中绝大多数仍然是 cjs 模块，无法在浏览器中以 esm 模块形式运行。怎么解决这个问题呢？vite 的做法就是“依赖预构建”。
简单的说，就是把 cjs 模块重新翻译成 esm 模块让浏览器能执行；同时将一些零散的模块进行合并，减少模块 http 请求数。这两个动作也将 vite 的速度降了一些，不过即使这样，也比 webpack 这种全构建的方案快了不止一星半点。
关于 vite 的简单介绍就到这里，我们接下来上手使用一下看看。
快速使用
Vite 需要 Node.js 版本 14.18+、16+。有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
使用 NPM:
$ npm create vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite
然后按照提示操作即可！
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app --template vue
在技术栈选择上，我们选择 vue 技术栈，至于其它的技术栈，感兴趣自行了解，不过多介绍。
之后按照提示进行依赖安装、运行，顺利的话会看到下面结果：
打开网址就能看到效果了，也可以看出来，vite 默认的 vue 模板是基于 vue3的。
打开控制台-网络面板，刷新页面，你能看到下面的内容，浏览器直接请求 App.vue 文件，而 vite 返回给浏览器的是已经转义过的 esm 模块，这也印证了我们前面对原理的分析。
目录下看了下，vite.config.js 就是它的配置文件，打开看下，非常少的内容，相比 webpack 简洁的不止一星半点。
兼容性
作为新兴工具链，大家最关心的就是它的兼容性，但是我并没有在官网上找到相关内容。不过 vite 的正式代码是基于 rollup 进行构建的，构建出的代码其实跟 webpack 并没有什么本质上的不同，所以兼容性应该是不需要特别关心的，不支持 vite 正式代码的浏览器基本也不会支持 vue3 的。
小结
到这里，Vite 工具链上手到这里就结束了。
我们回顾了前端构建历史，分析了 Vite 原理，用 Vite 新建一个项目、运行、预览。
不得不说，相较于 webpack 那复杂的配置，Vite 的使用就是一个感觉，快！
我想我以后会在工作中尝试 Vite 这一新型的构建工具链。