小鲜肉 Vite 会取代 OG Vue CLI 吗？

序言

上周（2021.2.18），尤大发布了 Vite 2.0。紧跟尤大动态的童鞋应该都知道，2021 以来，尤大对 Vite 有多看重。日更频率的提交 - commit 详情

若是说 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

在大型项目中，这一差别将更为明显。Webpack 开发服务器 build 和 re-build 速度可能会到 25 -30 秒，甚至更长。但对于同一项目，Vite 开发服务器可能总以 250ms 左右的恒定速度来构建项目。

打包与否

Webpack 的工做方式是经过处理程序中的每一个import、require将它们打包到不一样的 bundle 中。

若是其中的一个依赖发生了改变，再次构建须要从新打包整个依赖关系。依赖项的数量和构建所花费的时间呈线性关系。

而 Vite 再也不进行打包操做。它依赖浏览器对 JavaScript 模板的本机支持（又称 ES 模块，这是一个相对较新的功能）。

截图来自 MDN & basic-modules Github Demo

不足

目前咱们已经知道 Vite 能提供的就是 快，但它也存在一些不足：

• 浏览器兼容问题；

• 不支持所有的 CommonJS 模块；
• 处于迭代初期，功能还在不断变化；
• 项目构建不包括 Vuex、VueRouter 等工具；

因此，到底 用不用？ 以及 怎么用？ 仍是见仁见智的问题。本瓜认为，若是你受够了 Webpack 的构建速度，或者你是敢于尝新的人，那为何不呢？

小结

综上做个小结，目前这个 Vite 小鲜肉还不能取代咱 OG 老大哥 Vue CLI。

本篇并未进行实践对比，只是从形而上进行了一个认知。可是咱们也已看到了 Vite 自身的光芒。也许有一天，Vue CLI 会兼容它成为一个配置项。也许 Webpack6 也会支持利用浏览器的 ES 特性。也许 Vite 会彻底颠覆 Webpack（基于 http2 的普及）......

为何不呢？

撰文不易，点赞鼓励。讨论留言，携手向前。★,°:.☆(￣▽￣)/$:.°★ 。

关注公众号：【掘金安东尼】

参考

• Vite 官方文档
• has-vite-made-vue-cli-obsolete
• JavaScript modules 模块