Vite与Vue Cli的区别与详解

server/2024/11/14 11:38:11/

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

主要区别

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

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

开发环境的不同:
Vue Cli在开发环境下也是基于对源码文件的转换,即利用Webpack对代码打包,结合webpack-dev-server提供静态资源服务。
Vite在开发环境下基于浏览器原生ES6 Modules,省掉了耗时的打包流程,无须对代码进行打包,直接让浏览器使用,才使得开发环境下的体验非常好。

WebpackRollup_11">WebpackRollup工具的优劣:

  • 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 CliWebpack的工作模式: 通过解析应用程序中的每一个JavaScript模块中的import或者require,借助各种loader将整个应用程序构建成一个基于JavaScript捆绑包,并针对不同的文件后缀名(Sass、Vue等)转换成对应的JavaScript文件。这都是在webpack-dev-server服务器端提前完成的,文件越多,依赖越复杂,则消耗的时间越多。

ViteVue_Cli_36">ViteVue Cli的优缺点对比:

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

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


http://www.ppmy.cn/server/141194.html

相关文章

初识Electron 进程通信

概述 Electron chromium nodejs native API,也就是将node环境和浏览器环境整合到了一起,这样就构成了桌面端(chromium负责渲染、node负责操作系统API等) 流程模型 预加载脚本:运行在浏览器环境下,但是…

半导体制造技术导论(第二版)萧宏 第五章集成电路加热工艺答案

本章要求 1. 至少列出三种重要的加热工艺 水平式高温炉加热、垂直式高温炉加热(即传统的管式炉加热)、快速加热工艺RTP、激光镭射 退火LSA 2. 说明直立式和水平式炉管的基本系统,以及直立式炉管的优点 基本系统:控制系统…

VR的左右眼渲染方法

VR的左右眼视频渲染shader unity_StereoEyeIndex 结点可以判断当前渲染的时候左眼还是右眼,所以可以通过着色器来更根据当前眼睛使用不同的渲染方式达到左右眼渲染不同。 Shader "Unlit/VRVideoPlay" {Properties{_MainTex ("Texture", 2D) …

【Flume实操】实时监听 NetCat 端口和本地文件数据到 HDFS 案例分析

聚合:实时监听 NetCat 端口和本地文件数据到 HDFS 案例分析 案例需求:假设有一个生产场景,Flume1 在实时产生日志数据,日志类型为 flume.log。Flume2 在持续监控一个 netcat 端口的数据流。先需要将 Flume1、Flume2产生的数据采集…

关于word 页眉页脚的一些小问题

去掉页眉底纹: 对文档的段落边框和底纹进行设置,也是页眉横线怎么删除的一种解决方式,具体操作如下: 选中页眉中的横线文本; 点击【开始】选项卡,在【段落】组中点击【边框】按钮的下拉箭头; …

FreeRTOS 23:事件组EventGroup创建、删除、置位操作

FreeRTOS 提供了事件标志组的一些相关操作函数,如下表所示: 创建一个事件组 xEventGroupCreate() 动态方式创建事件标志组 xEventGroupCreate()用于创建一个事件组,并返回对应的句柄。 要想使用该函数必须 在头文件 FreeRTOSConfig.h 定义宏…

Linux安装Mysql详细教程(两种安装方法)

Linux之Mysql安装配置 第一种:Linux离线安装Mysql(提前手动下载好tar.gz包)第二种:通过yum安装配置Mysql(服务器有网络) 第一种:tar.gz包安装 1、 查看是否已经安装 Mysql rpm -qa | grep m…

AMD-OLMo:在 AMD Instinct MI250 GPU 上训练的新一代大型语言模型。

AMD-OLMo是一系列10亿参数语言模型,由AMD公司在AMD Instinct MI250 GPU上进行训练,AMD Instinct MI250 GPU是一个功能强大的图形处理器集群,它利用了OLMo这一公司开发的尖端语言模型。AMD 创建 OLMo 是为了突出其 Instinct GPU 在运行 “具有…