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

简介: 如果说 Vite 是 2021 年咱前端圈的新晋顶流小鲜肉当真一点不为过!尚不清楚的 XDM 可能想问,这玩意儿到底是要干嘛呢?

image.png


序言



上周(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 请求并做相应处理,实现真正意义上的按需。此处附两张官网图来对比二者差异。

image.png

image.png

本文将稍作展开探讨: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 服务器速度快十倍多,上图以佐证。


image.png


完整的视频在 Vite and VitePress - Evan You

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


打包与否



Webpack 的工作方式是通过处理程序中的每个importrequire将它们打包到不同的 bundle 中。


如果其中的一个依赖发生了改变,再次构建需要重新打包整个依赖关系。依赖项的数量和构建所花费的时间呈线性关系。


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

image.png

截图来自 MDN & basic-modules Github Demo


不足



目前我们已经知道 Vite 能提供的就是 ,但它也存在一些不足:

  • 浏览器兼容问题;


image.png

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


所以,到底 用不用? 以及 怎么用? 还是见仁见智的问题。本瓜认为,如果你受够了 Webpack 的构建速度,或者你是勇于尝新的人,那为什么不呢?


小结



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

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


image.png


为什么不呢?


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

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


参考




相关文章
|
28天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
4天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
28天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
25 1
|
28天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
28天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript
vite-Vue的无捆绑开发服务
vite-Vue的无捆绑开发服务
114 0
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
36 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
27 1
vue学习第三章
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章