Vite使Vue CLI过时了吗?

Wesley13
• 阅读 1035

Vite使Vue CLI过时了吗?
文末福利资源更新

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的工作方式是,它通过解析应用程序中的每一个 importrequire ,将整个应用程序构建成一个基于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的发展。时间会证明这一点
Snowpack:https://www.snowpack.dev/


原文:https://vuejsdevelopers.com/2020/12/07/vite-vue-cli/
作者:Anthony Gore

粉丝福利

144期留言+在看幸运用户:暂无。

临走前留下,今天的福利

  • 福利1: 《教你玩转手机摄影,随手拍出好照片》获取资源请在公众号对话框中回复关键字:FL04, 如果没有关注请扫下面的二维码

  • 福利2:在看+留言, 我随机抽取一位认真留言的小伙伴,给他发一个红包奖励

最近文章

- END -

点赞 + 在看 + 留言,下一个幸运儿就是你!
走心的分享更容易被抽中~
开奖时间 下期文末

Vite使Vue CLI过时了吗?

Vite使Vue CLI过时了吗?

本文分享自微信公众号 - 前端全栈开发者(by-zhangbing-dev)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这