Vite与Vue Cli的区别与详解

它们的功能非常相似,都是提供基本项目脚手架和开发服务器的构建工具。

主要区别

Vite在开发环境下基于浏览器原生ES6 Modules提供功能支持,在生产环境下基于Rollup打包;
Vue Cli不区分环境,都是基于Webpack。

在生产环境下,两者都是基于源码文件的,Rollup和Webpack都是对代码进行处理,并提供浏览器页面所需要的HTML、JavaScript、CSS、图片等静态文件。

开发环境的不同:

Vue Cli在开发环境下也是基于对源码文件的转换,即利用Webpack对代码打包,结合webpack-dev-server提供静态资源服务。

Vite在开发环境下基于浏览器原生ES6 Modules,省掉了耗时的打包流程,无须对代码进行打包,直接让浏览器使用,才使得开发环境下的体验非常好。

Webpack与Rollup工具的优劣:

  • Webpack生态丰富,可以处理各种各样的资源依赖,以及代码拆分与合并。Rollup的插件生态较Webpack弱一些,但是也可以满足基本的日常开发需要,且不支持Code Splitting和热更新。

  • Rollup对ES6

    Modules的代码依赖方式天然支持,而对于类似CommonJS或UMD方式的依赖却无法可靠地处理;Webpack借助自己的__webpack_require_函数和Babel,对于各种类型的代码都支持得比较好。

  • Rollup会静态分析代码中的import,并将排除任何未实际使用的代码,即对Tree Shaking支持得很好;Webpack则从Webpack2版本开始支持Tree Shaking,且要求使用原生的import和export语法,并且是没有被Babel转换过的代码。

  • Rollup编译的代码可读性更好,没有过多的冗余代码;而Webpack则会插入很多__webpack_require__函数,影响代码的可读性。

哪个性能更好

通过主要区别的介绍,在开发环境下,Vite速度更快,体验性更好。生产环境下区别不大。
Vite不捆绑应用服务器端。 依赖于浏览器对ES6 Modules的原生支持,浏览器直接通过HTTP请求JavaScript模块,并且在运行时处理,而对于Sass、Vue文件等,则单独采用插件处理,并提供静态服务,利用浏览器高效处理,消耗更少的时间。
Vue Cli的Webpack的工作模式: 通过解析应用程序中的每一个JavaScript模块中的import或者require,借助各种loader将整个应用程序构建成一个基于JavaScript捆绑包,并针对不同的文件后缀名(Sass、Vue等)转换成对应的JavaScript文件。这都是在webpack-dev-server服务器端提前完成的,文件越多,依赖越复杂,则消耗的时间越多。

Vite与Vue Cli的优缺点对比:

Vite的优点 Vite的缺点
开发环境速度快,体验好 只针对ES6浏览器
支持Vue、React等 脚手架不包括Vuex、Router等
Vue Cli的优点 Vue Cli的缺点
构建配置项丰富,插件全,生态好 开发环境慢,体验性差
可以和Vue2、Vue3结合 只支持Vue
直接解析各种类型的代码依赖 产生冗余代码较多

Vue Cli和Vite到底怎么选择?需要结合实际的业务场景来做选择。

相关推荐
旧识君3 分钟前
前端图片压缩实战:基于compressorjs的高效解决方案
前端·javascript·vue.js
清风细雨_林木木35 分钟前
Vue 中 this.$emit(“update:xx“,value) 和 :xx.sync 实现同步数据的做法
前端·javascript·vue.js
自动花钱机1 小时前
ESLint语法报错
前端·javascript·vue.js·css3·html5
工业互联网专业1 小时前
基于springcloud微服务架构的巡游出租管理平台
java·vue.js·spring cloud·微服务·毕业设计·源码·课程设计
╰つ゛木槿1 小时前
Vue与React区别分析
前端·vue.js·react.js
thinkQuadratic1 小时前
vue修饰符
前端·javascript·vue.js
不吃香菜的猪1 小时前
el-dialog实现遮罩层后面的内容也能点击
前端·javascript·vue.js
喜陈2 小时前
解决elementui-plus使用el-table的合计功能时横向滚动条显示在了合计上方
前端·vue.js·elementui
清风絮柳10 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维10 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数