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

相关推荐
一个处女座的程序猿O(∩_∩)O1 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
燃先生._.7 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
理想不理想v10 小时前
webpack最基础的配置
前端·webpack·node.js
2401_8576009511 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_8576009511 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL11 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
轻口味11 小时前
Vue.js 核心概念:模板、指令、数据绑定
vue.js
2402_8575834911 小时前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
java_heartLake12 小时前
Vue3之性能优化
javascript·vue.js·性能优化
ddd君3177413 小时前
组件的声明、创建、渲染
vue.js