Vue生态系统中有一个名为Vite的新构建工具，它的开发服务器比Vue CLI快10-100倍。
这是否意味着Vue CLI曾经过期了?在本文中，我将比拟这两种构建工具，并阐明它们的优缺点，以便你能够决定哪一种适宜你的下一个我的项目。
Vue CLI概述
大多数Vue开发人员都晓得，Vue CLI是应用规范构建工具和最佳实际配置疾速建设基于Vue的我的项目的不可或缺的工具。
其次要性能包含：
- 工程脚手架
- 带热模块重载的开发服务器
- 插件零碎
- 用户界面
在本探讨中须要留神的是，Vue CLI是构建在Webpack之上的，因而开发服务器和构建性能和性能都将是Webpack的超集。
Vite概述
与Vue CLI相似，Vite也是一个提供根本我的项目脚手架和开发服务器的构建工具。
然而，Vite并不是基于Webpack的，它有本人的开发服务器，利用浏览器中的原生ES模块。这种架构使得Vite比Webpack的开发服务器快了好几个数量级。Vite采纳Rollup进行构建，速度也更快。
Vite目前还处于测试阶段，看来Vite我的项目的目标并不是像Vue CLI那样的一体化工具，而是专一于提供一个疾速的开发服务器和根本的构建工具。
Vite怎么这么快？
Vite开发服务器至多会比Webpack快10倍左右。对于一个根本的我的项目来说，与2.5秒相比，开发构建/从新构建的工夫相差250ms。
在一个较大的我的项目中，这种差别会变得更加显著。Webpack开发服务器在构建/从新构建时可能会慢到25-30秒，有时甚至更慢。与此同时，Vite开发服务器可能会以恒定的250ms的速度为同一个我的项目提供服务。
这显然是开发教训和游戏规则扭转的差别，Vite是如何做到这一点的？
Webpack开发服务器架构
Webpack的工作形式是，它通过解析应用程序中的每一个 import 和 require ，将整个应用程序构建成一个基于JavaScript的捆绑包，并在运行时转换文件（例如Sass、TypeScript、SFC）。
这都是在服务器端实现的，依赖的数量和扭转后构建/从新构建的工夫之间有一个大抵的线性关系。
Vite开发服务器架构
Vite不捆绑利用服务器端。相同，它依赖于浏览器对JavaScript模块的原生反对（也就是ES模块，是一个比拟新的性能）。
浏览器将在须要时通过HTTP申请任何JS模块，并在运行时进行解决。Vite开发服务器将按需转换任何文件（如Sass、TypeScript、SFC）。
这种架构防止了服务器端对整个利用的捆绑，并利用浏览器高效的模块解决，提供了一个显著更快的开发服务器。
提醒：当你对应用程序进行code-split和tree-shake动时，Vite的速度会更快，因为它只加载它须要的模块，即便是在开发阶段。这与Webpack不同，在Webpack中，代码拆分只对生产包无利。
Vite的毛病
你可能曾经明确了，Vite的次要特点是它的开发服务器快得离谱。
如果没有这个性能，可能就不会再探讨了，因为与Vue CLI相比，它的确没有其余的性能，而且的确有一些毛病。
因为Vite应用了JavaScript模块，所以最好让依赖关系也应用JavaScript模块。尽管大多数古代JS包都提供了这一点，但一些老的包可能只提供CommonJS模块。
Vite能够将CommonJS转换为JavaSript模块，但在一些边缘状况下它可能无奈做到。当然，它还须要反对JavaScript模块的浏览器。
与Webpack/Vue CLI不同，Vite无奈创立针对旧版浏览器、web components等的捆绑包。
而且，与Vue CLI不同，开发服务器和构建工具是不同的零碎，导致在生产与开发中可能呈现不统一的行为。
Vue CLI vs Vite总结
| Vue CLI 长处 | Vue CLI 毛病 |
|---|---|
| 经验过战斗考验，牢靠 | 开发服务器速度与依赖数量成反比 |
| 与Vue 2兼容 | |
| 能够捆绑任何类型的依赖关系 | |
| 插件生态系统 | |
| 能够针对不同的指标进行构建 |
| Vite 长处 | Vite 毛病 |
|---|---|
| 开发服务器比Webpack快10-100倍 | 只能针对古代浏览器（ES2015+） |
| 将code-splitting作为优先事项 | 与CommonJS模块不齐全兼容 |
| 处于测试阶段，仅反对Vue 3 | |
| 最小的脚手架不包含Vuex、路由器等 | |
| 不同的开发服务器与构建工具 |
那么裁决后果是什么？
对于有教训的Vue开发来说，Vite是一个很好的抉择，因为它的开发服务器速度快得离谱，让Webpack看起来像史前时代。
然而，对于喜爱一些手把手的Vue新开发人员来说，或者，对于应用遗留模块和须要简单构建的大型项目来说，Vue CLI很可能在目前依然是必不可少的。
Vite的将来
尽管下面的比拟次要集中在Vite和Vue CLI的现状上，但仍有几点须要思考：
- 仅当浏览器中的JavaScript模块反对失去改善时，Vite才会有所改善。
- 随着JS生态系统的追赶，更多的软件包将反对JavaScript模块，缩小Vite无奈解决的边缘状况。
- Vite仍处于测试阶段–性能可能会有变动。
- 有可能Vue CLI最终会联合Vite，这样你就不必再应用其中一个了。
值得注意的是，Vite并不是惟一一个利用浏览器中JavaScript模块的开发服务器我的项目。还有更驰名的Snowpack，甚至可能会挤掉Vite的倒退。工夫会证实这一点
参考
- Vite and VitePress, Evan You, VueConf Toronto 2020
- Vite – GitHub
- Vue CLI – GitHub
原文：https://vuejsdevelopers.com/2…
作者：Anthony Gore
发表回复