Vite与Vue Cli的区别与详解

news/2024/11/14 8:37:08/

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

主要区别

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/news/1545999.html

相关文章

C#:强大而优雅的编程语言

在当今的软件开发领域,C#作为一种广泛应用的编程语言,以其强大的功能、优雅的语法和丰富的生态系统,受到了众多开发者的喜爱。本文将深入探讨 C#的各个方面,展示它的魅力和优势。 一、C#的历史与发展 C#是由微软公司开发的一种面…

Gradient Boosting Regressor(GBDT)--- 论文实战

一、前言 在《机器学习论文复现实战---linear regression》中通过Pearson 相关性分析,去除了2个高相关性特征 "PN" 和 "AN" ,数据维度变为890*25。(数据集地址) 这里我们不做任何前期处理,直接就将数据放入 GBDT 模型中进行训练了。 二、模型训练过程…

网站架构知识之Ansible进阶(day022)

1.handler触发器 应用场景:一般用于分发配置文件时候,如果配置文件有变化,则重启服务,如果没有变化,则不重启服务 案列01:分发nfs配置文件,若文件发生改变则重启服务 2.when判断 用于给ans运…

uniapp中使用全局样式文件引入的三种方式

如果你想在 uni-app 中全局引入 SCSS 文件(例如 global.scss),可以通过以下步骤进行配置: 方法一:在 main.js 中引入 在 main.js 中引入全局样式: 你可以在 src/main.js 文件中直接引入 SCSS 文件&#xff…

华为HarmonyOS打造开放、合规的广告生态 - 贴片广告

场景介绍 贴片广告是一种在视频播放前、视频播放中或视频播放结束后插入的视频或图片广告。 接口说明 接口名 描述 loadAd(adParam: AdRequestParams, adOptions: AdOptions, listener: AdLoadListener): void 请求单广告位广告,通过AdRequestParams、AdOptions…

Jenkins系列

jenkins 1、搭建Jenkins 搭建Jenkins 2、这是什么 3、这是什么 4、 这是什么 5、这是什么 文章目录 jenkins1、搭建Jenkins2、这是什么3、这是什么4、 这是什么5、这是什么 前言 前言 提示:这里可以添加本文要记录的大概内容: 例如:随…

训练实时语音识别Paraformer模型

1. 研究背景 最近有一位研二的学生添加我的微信,付费让我给她训练ASR模型。 市面上的语音识别模型基本上都是通用识别模型,对于特定领域的识别字错率太高了。比如专门针对航空领域的语音识别就不尽如意,因为在航空领域中有一些航空的专有名…

08 Oracle数据库故障应对与恢复策略:全面掌握RMAN恢复方法

文章目录 Oracle数据库故障应对与恢复策略:全面掌握RMAN恢复方法一、故障场景及恢复策略1.1 实例失败1.2 介质故障1.3 数据丢失 二、RMAN恢复方法详解2.1 全库恢复2.2 增量恢复2.3 时间点恢复 三、实践与总结 Oracle数据库故障应对与恢复策略:全面掌握RM…