首页 > 其他分享 >Vite与Vue Cli的区别与详解

Vite与Vue Cli的区别与详解

时间:2024-11-08 13:49:48浏览次数:3  
标签:Vue 浏览器 Cli 代码 Webpack Vite

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

主要区别

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

标签:Vue,浏览器,Cli,代码,Webpack,Vite
From: https://blog.csdn.net/friend_ship/article/details/143624004

相关文章

  • 网页突破复制粘贴Absolute Enable Right Click & Copy插件
    网页突破复制粘贴AbsoluteEnableRightClick&Copy插件,可以先下载,微软官方有edge,chrome系列浏览器可以用。步骤如下1、2、3、4、这样,浏览器浏览网页遇到不能复制粘贴,则可以打开扩展程序的指针,允许复制粘贴功能。即可。 ......
  • Vuex的基本使用
    文章目录一、Vuex概述1.是什么2.使用场景3.优势4.注意二、如何构建vuex多组件共享数据环境1.创建项目2.创建三个组件3.源代码三、vuex的使用-创建仓库1.安装vuex2.新建`store/index.js`专门存放vuex3.创建仓库`store/index.js`4在main......
  • 第三十四章 Vue路由进阶之声明式导航(导航高亮)
    目录一、导航高亮1.1.基于语法1.2.主要代码 二、声明式导航的两个类名2.1.声明式导航类名匹配方式2.2.声明式导航类名样式自定义 ​2.3.核心代码一、导航高亮1.1.基于语法在Vue中通过VueRouter插件,我们可以非常简单的实现实现导航高亮效果VueRouter提......
  • Vue3+AntDesign后台管理系统 | 小蚂蚁云
      项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、AntDesign、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈......
  • 最全Vue3开源管理系统 | 小蚂蚁云
    框架ElementPlusAntDesignVueNaiveUIArcoDesign简介element-uiVue3版本AntDesign的Vue实现,组件的风格与AntDesign保持同步Vue作者推荐的Vue3ui组件库ArcoDesign主要服务于字节跳动旗下中后台产品的体验设计和技术实现社区活跃度高高中中实现方式单文件Vue单文......
  • Vue3+ElementPlus快速入门 | 小蚂蚁云
       项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技......
  • Vue项目引入CDN加速
    Vue项目引入CDN加速前言阿里云服务器,如果使用的是1M带宽,在加载样式时,例如ElementUI,Ckeditor的时候,非常的慢,所以考虑是用CDN来加速。引入Vue和Element首先我们需要引入的是Element的CDN加速:传送门目前可以通过unpkg.com/element-ui获取到最新版本的资源,在页面上引入......
  • jeecg使用vue-pdf 和print-js实现pdf预览和打印
    前言近期我正在开发一个前后端分离项目,使用了SpringBoot和Vue2,借助了国内优秀的框架jeecg,前端UI库则选择了ant-design-vue。在项目中,需要实现文件上传功能,同时还要能够在线预览和下载图片和PDF文件,甚至需要在页面上直接打印PDF文件。尽管框架自带了vue-print-nb-jeecg组件......
  • 36套Web前端全栈Vue3项目实战P7架构-入门篇+项目篇+进阶篇+架构篇
    36套Web前端全栈Vue3项目实战P7架构-入门篇+项目篇+进阶篇+架构篇36套eb前端全栈Vue3项目实战-入门篇+项目篇+进阶篇+架构篇,P7前端架构,高薪面试,Vue3源码剖析视频课程-技术栈-TypeScript+Vute+ElementPlus+Koa2+Node.js+Pinia+EChart4.0+Uni-App+React18+Flutter+Web3D+Vant+UI,项......
  • PHP与Vue.js结合,开发现代Web应用的前后端分离
    随着前端技术的迅猛发展,前后端分离已成为现代Web应用开发的重要趋势。在这个架构中,PHP作为后端语言,配合Vue.js这样的前端框架,可以有效提高开发效率和用户体验。PHP与Vue.js的结合,使得开发者能够专注于各自领域的专业技术,形成高效、灵活的开发模式。PHP作为一种成熟的后端开发语言......