Vite和Vue CLI的优劣
Vue生态系统中有一个名为Vite的新构建工具，它的开发服务器比VueCLI快10-100倍。
这是否意味着VueCLI已经过时了?在本文中，我将比较这两种构建工具，并说明它们的优缺点，以便你可以决定哪一种适合你的下一个项目。
VueCLI概述
大多数Vue开发人员都知道，VueCLI是使用标准构建工具和最佳实践配置快速建立基于Vue的项目的不可或缺的工具。
其主要功能包括：
- 工程脚手架
- 带热模块重载的开发服务器
- 插件系统
- 用户界面
在本讨论中需要注意的是，VueCLI是构建在Webpack之上的，因此开发服务器和构建功能和性能都将是Webpack的超集。
Vite概述
与VueCLI类似，Vite也是一个提供基本项目脚手架和开发服务器的构建工具。
然而，Vite并不是基于Webpack的，它有自己的开发服务器，利用浏览器中的原生ES模块。这种架构使得Vite比Webpack的开发服务器快了好几个数量级。Vite采用Rollup进行构建，速度也更快。
Vite目前还处于测试阶段，看来Vite项目的目的并不是像VueCLI那样的一体化工具，而是专注于提供一个快速的开发服务器和基本的构建工具。
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的主要特点是它的开发服务器快得离谱。
如果没有这个功能，可能就不会再讨论了，因为与VueCLI相比，它确实没有其他的功能，而且确实有一些缺点。
由于Vite使用了JavaScript模块，所以最好让依赖关系也使用JavaScript模块。虽然大多数现代JS包都提供了这一点，但一些老的包可能只提供CommonJS模块。
Vite可以将CommonJS转换为JavaSript模块，但在一些边缘情况下它可能无法做到。当然，它还需要支持JavaScript模块的浏览器。
与Webpack/VueCLI不同，Vite无法创建针对旧版浏览器、webcomponents等的捆绑包。
而且，与VueCLI不同，开发服务器和构建工具是不同的系统，导致在生产与开发中可能出现不一致的行为。
VueCLIvsVite总结
| VueCLI优点 | VueCLI缺点 |
|---|---|
| 经历过战斗考验，可靠 | 开发服务器速度与依赖数量成反比 |
| 与Vue2兼容 | |
| 可以捆绑任何类型的依赖关系 | |
| 插件生态系统 | |
| 可以针对不同的目标进行构建 |
| Vite优点 | Vite缺点 |
|---|---|
| 开发服务器比Webpack快10-100倍 | 只能针对现代浏览器（ES2015+） |
| 将code-splitting作为优先事项 | 与CommonJS模块不完全兼容 |
| 处于测试阶段，仅支持Vue3 | |
| 最小的脚手架不包括Vuex、路由器等 | |
| 不同的开发服务器与构建工具 |
Vite的未来
虽然上面的比较主要集中在Vite和VueCLI的现状上，但仍有几点需要考虑：
- 仅当浏览器中的JavaScript模块支持得到改善时，Vite才会有所改善。
- 随着JS生态系统的追赶，更多的软件包将支持JavaScript模块，减少Vite无法处理的边缘情况。
- Vite仍处于测试阶段–功能可能会有变化。
- 有可能VueCLI最终会结合Vite，这样你就不用再使用其中一个了。
值得注意的是，Vite并不是唯一一个利用浏览器中JavaScript模块的开发服务器项目。还有更著名的Snowpack，甚至可能会挤掉Vite的发展。时间会证明这一点
以上就是Vite和VueCLI的优劣的详细内容，更多关于Vite和VueCLI的资料请关注毛票票其它相关文章！