Vite使Vue CLI过期了吗？

文末福利资源更新

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的发展。时间会证实这一点
Snowpack：https://www.snowpack.dev/

---

原文：https://vuejsdevelopers.com/2020/12/07/vite-vue-cli/
做者：Anthony Gore

粉丝福利

144期留言+在看幸运用户：暂无。

临走前留下，今天的福利

• 福利1：《教你玩转手机摄影，随手拍出好照片》获取资源请在公众号对话框中回复关键字：FL04，若是没有关注请扫下面的二维码
• 福利2：在看+留言，我随机抽取一位认真留言的小伙伴，给他发一个红包奖励