小鲜肉 Vite 会取代 OG Vue CLI 吗？
# 序言
上周（2021.2.18），尤大发布了 Vite 2.0。紧跟尤大动态的童鞋应该都知道，2021 以来，尤大对 Vite 有多看重。日更频率的提交 - commit 详情 (opens new window)
如果说 Vite 是 2021 年咱前端圈的新晋顶流小鲜肉当真一点不为过！
尚不清楚的 XDM 可能想问，这玩意儿到底是要干嘛呢？
一句话概括：
Vite 是一款全新的前端构建工具，它的服务器速度比 Vue CLI 快十到一百倍。
嗦嘎，我们都知道，在 Vue CLI 项目，每次 npm run dev 或 npm run build 都要十几秒甚至几十秒、甚至几分钟都是有可能的，这确实让人有点蓝瘦。Vite 就是来解决这个痛点的。更高、更快、更强是我们永远的追求，在任何领域都是这样。
那它原理是？
一句话概括：
Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。
用大白话讲，即 Vite 不需要像 Webpack 打包代码，只需拦截浏览器发出的 ES imports 请求并做相应处理，实现真正意义上的按需。此处附两张官网图来对比二者差异。
本文将稍作展开探讨：Vite VS Vue CLI，一起康康这位小鲜肉是否会取代咱 OG 老大哥？
# Vue CLI
Vue CLI 是我们搭建 Vue 项目的最强脚手架，因为它自带 Webpack，以及其它最佳项目实践配置。
包括：
- 项目结构
- 支持热更新的开发服务器
- 插件系统
- 接口支持
也可以这样理解：Vue CLI 服务器的构建功能和性能是 Webpack 的超集。
# Vite
和 Vue CLI 类似，Vite 也是一个构建工具，提供基本的项目框架和开发服务器。
但是，Vite 不是基于 Webpack 的，Vite 拥有自己的开发服务器，该服务器利用浏览器中的本机 ES 模块。这种架构比 Webpack 的开发服务器要快几个数量级。在生产环境，Vite 使用 Rollup 进行 build，速度也更快。
目前看，Vite 目标并不是成为像 Vue CLI 这样具有多功能的构建工具，而是专注于提供快速的开发服务器和基本的构建服务。
# 唯快不破
Vite 服务器速度比 Vue CLI 自带的 Webpack 服务器速度快十倍多，上图以佐证。
完整的视频在 Vite and VitePress - Evan You (opens new window)
在大型项目中，这一差异将更为明显。Webpack 开发服务器 build 和 re-build 速度可能会到 25 -30 秒，甚至更长。但对于同一项目，Vite 开发服务器可能总以 250ms 左右的恒定速度来构建项目。
# 打包与否
Webpack 的工作方式是通过处理程序中的每个import、require将它们打包到不同的 bundle 中。
如果其中的一个依赖发生了改变，再次构建需要重新打包整个依赖关系。依赖项的数量和构建所花费的时间呈线性关系。
而 Vite 不再进行打包操作。它依赖浏览器对 JavaScript 模板的本机支持（又称 ES 模块，这是一个相对较新的功能）。
截图来自 MDN (opens new window) & basic-modules Github Demo (opens new window)
# 不足
目前我们已经知道 Vite 能提供的就是 快，但它也存在一些不足：
- 浏览器兼容问题；
- 不支持全部的 CommonJS 模块；
- 处于迭代初期，功能还在不断变化；
- 项目构建不包括 Vuex、VueRouter 等工具；
所以，到底 用不用？ 以及 怎么用？ 还是见仁见智的问题。本瓜认为，如果你受够了 Webpack 的构建速度，或者你是勇于尝新的人，那为什么不呢？
# 小结
综上作个小结，目前这个 Vite 小鲜肉还不能取代咱 OG Vue CLI。
本篇并未进行实践对比，只是从形而上进行了一个认知。但是我们也已看到了 Vite 自身的光芒。也许有一天，Vue CLI 会兼容它成为一个配置项。也许 Webpack6 也会支持利用浏览器的 ES 特性。也许 Vite 会完全颠覆 Webpack（基于 http2 的普及）......
为什么不呢？
撰文不易，点赞鼓励。讨论留言，携手向前。★,°:.☆(￣▽￣)/$:.°★ 。
关注公众号：【掘金安东尼】
