共计 2291 个字符，预计需要花费 6 分钟才能阅读完成。
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
