什么是 Vite

Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。那么 Vite 究竟有什么魅力？

这里引用一下 vite 官网首页的描述：下一代前端开发与构建工具

为什么是下一代呢？

现有的前端构建工具不够我们用吗？

Vite 是不是在重复造轮子？

下面我就用简单的逻辑解释一下 Vite 的优越性。

为了解释“下一代”这个问题，我们需要先了解一下“上一代”有什么问题。

为了了解“上一代”的问题，我们就需要弄懂“模块化”的概念。

在ES6出现之前，我们的代码模块化都是使用的社区规范

例如 node.js 中的 Common JS 规范。它并不是语言官方给出的规范，而是我们的开发者社区提供的规范，只不过用在了 node.js 当中。

再比如我们客户端的 AMD、CMD 模块化规范
ES6 出现之后，代码模块化有了语言规范，即 ES-Module

ES-Module 是伴随 ES6 出现的原生js模块化解决方案，其优越性这里先略掉。

模块化方案有很多，基于这些方案的工具也有很多。这里先放个结论：抛弃社区规范，使用语言规范成为前端模块化开发的趋势

所以，Vite 可以说是“下一代“

先来看看模块化打包工具的出现是需要解决什么问题的：

我们常见的构建工具：webpack、rollup、parcel 等都着手解决了这些问题。

其中，Vite 的构建指令就是通过 rollup 来打包你的代码。而 rollup 的官网中有这么一句话：

rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。

也再次印证了模块化方案要紧跟 ES6 的潮流，所以 Vite 它来了。

都读到这里了，显然不是啊。

原理：利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间

Vite2.0 算是 Vite 的第一个稳定版本，带来了大量的改进。所以我们直接使用 Vite 2.0 即可。

待更新... ...