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到底怎么选择?需要结合实际的业务场景来做选择。

相关推荐
海天胜景2 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
用户38022585982412 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
源码站~1 小时前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
江城开朗的豌豆1 小时前
路由守卫通关秘籍:这些钩子函数让你的页面跳转稳如老狗!
前端·javascript·vue.js
加减法原则1 小时前
Vue 模板引用(ref)全面指南:从基础到高级应用
vue.js
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
快起来别睡了1 小时前
Vue 响应式系统与 `computed` 属性详解:小白也能学会的完整指南
vue.js
江城开朗的豌豆2 小时前
Vuex中mutations和actions的那些事儿:为啥非要分家?
前端·javascript·vue.js
opbr2 小时前
🚫🔨 不用重构!教你用 Vue3 + TSX 🧹优雅收纳后台页面一堆操作按钮
前端·vue.js
西瓜树枝2 小时前
antd vue全局自定义样式前缀实践
前端·vue.js