认识vite

一.了解vite的不同版本的更新

  1. vite1版本是基于vue项目的,无法跨框架使用
  2. vite2可以跨框架(vue2,vue3,react)
  3. vite3模板变更;vite cli优化;import.meta.glob API变化;其他
  4. vite4主版本主要目标是升级到Rollup 3;从 Vite core monorepo 中移出;有两个插件可用于不同的 React 项目;.css默认导出被弃用;其他

二.了解vite创建的vue的版本号

在package.json文件中  dependencies 对应vue的版本

三.了解vite与webpack的区别

  1. 开发模式不同

        webpack在开发模式下依然会对所有的模块进行打包操作,在大型项目中可能出现更新和编译缓慢的问题;

        vite采用基于ES Module的开发服务器,只有在需要时才编译对应的模块,大幅提升了开发环境的响应速度。

  1. 打包效率不同

        webpack打包时,会把所有所有模块打包成一个bundle,会导致初次加载速度比较慢;

        vite利用浏览器对ES Module的原生支持,只打包和缓存实际改动的模块,极大提高打包效率

  1. 插件生态不同

        webpack插件生态比较丰富;

        vite相比webpack显得较为稀少

  1. 配置复杂度不同

       webpack配置相对复杂,对新手不够友好;

       vite在设计上注重开箱即用,大部分场景下用户无需自己写配置文件

  1. 热更新机制不同

       webpack的热更新需要整个模块链重新打包和替换,对于大型项目可能会有延迟;

       vite的热更新则只会针对改动的模块进行更新,提高了更新速度

总结:vite快速开发的体验,简单易用,集成vue.js;但复杂项目要自行配置,对其他框架支持不够完善,遇到复杂依赖加载速度还是比较慢

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/34057.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django框架-使用celery(一):django使用celery的通用配置,不受版本影响

目录 一、依赖包情况 二、项目目录结构 2.1、怎么将django的应用创建到apps包 三、celery的配置 2.1、celery_task/celery.py 2.2、celery_task/async_task.py 2.3、celery_task/scheduler_task.py 2.4、utils/check_task.py 四、apps/user中配置相关处理视图 4.1、基本…

【数据结构】复杂度

🔥博客主页:小王又困了 📚系列专栏:数据结构 🌟人之为学,不日近则日退 ❤️感谢大家点赞👍收藏⭐评论✍️ 目录 一、什么是数据结构 二、什么是算法 三、算法的效率 四、时间复杂度 4.…

k8s基础

k8s基础 文章目录 k8s基础一、k8s组件二、k8s组件作用1.master节点2.worker node节点 三、K8S创建Pod的工作流程?四、K8S资源对象1.Pod2.Pod控制器3.service && ingress 五、K8S资源配置信息六、K8s部署1.K8S二进制部署2.K8S kubeadm搭建 七、K8s网络八、K8…

人大金仓三大兼容:Oracle迁移无忧

企业级应用早期的架构模式是C/S(Client/Server)模式,Client做人机交互逻辑的呈现,Sever做业务计算逻辑的实现。这就类似餐馆的运作模式,Client是前台的服务员提供点菜和上菜服务,而Server则是后厨完成菜品的…

设计模式之工厂方法模式(FactoryMethod)

一、概述 定义一个用于创建对象的接口,让子类决定实例化哪一个类。FactoryMethod使一个类的实例化延迟到其子类。 二、适用性 1.当一个类不知道它所必须创建的对象的类的时候。 2.当一个类希望由它的子类来指定它所创建的对象的时候。 3.当类将创建对象的职责委…

vue生命周期解析

Vue.js 是一个流行的前端 JavaScript 框架,它提供了一种用于构建用户界面的渐进式方法。Vue 组件的生命周期钩子函数是一些特定的函数,它们在组件不同阶段被自动调用,可以让你在这些阶段执行特定的逻辑。下面是 Vue 组件的生命周期钩子函数以…

【Spring】核心容器——Setter注入

1、引入 首先引入Spring框架依赖 <dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.1.6.RELEASE</version> </dependency> 在dao层和service层分别准备两个接口以及他…

Stable Diffuion webui Mac版本安装过程

系统环境 操作系统&#xff1a;MacOS Ventura13.5 芯片&#xff1a;Apple M2 Max Python: 3.10 安装前置准备 git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git注意事项&#xff1a;修改源码内全部 git clone 链接&#xff0c;设置代理 https://ghpr…

26 | 谷歌应用APP数据分析

基于kaggle公开数据集,对谷歌应用市场的APP情况进行数据探索和分析。 from kaggle: https://www.kaggle.com/lava18/google-play-store-apps 分析思路: 0、数据准备 1、数据概览 2、种类对Rating的影响 3、定价策略 4、因素相关性分析 5、用户评价 6、总结 0、数据准备 (…

Fast SAM与YOLOV8检测模型一起使用实现实例分割以及指定物体分割

Fast SAM与YOLOV8检测模型一起使用 部分源代码在结尾处可获取 晓理紫 1 使用场景 实例分割数据集的获取要比检测数据的获取更加困难&#xff0c;在已有检测模型不想从新标注分割数据进行训练但是又想获取相关物体的mask信息以便从像素级别对物体进行操作&#xff0c;这时就可以…

学习内容散记

git下载网址 &#xff1a;https://registry.npmmirror.com/binary.html?pathgit-for-windows/ error: remote origin already exists 如果你clone下来一个别人的仓库&#xff0c;在此基础上完成你的代码&#xff0c;推送到自己的仓库可能遇到如下问题&#xff1a; error: r…

uniapp开发(由浅到深)

文章目录 1. 项目构建1.1 脚手架构建1.2 HBuilderX创建 uni-app项目步骤&#xff1a; 2 . 包依赖2.1 uView2.2 使用uni原生ui插件2.3 uni-modules2.4 vuex使用 3.跨平台兼容3.1 条件编译 4.API 使用4.1 正逆参数传递 5. 接口封装6. 多端打包3.1 微信小程序3.2 打包App3.2.1 自有…

PHP“牵手”京东商品详情数据获取方法,京东商品详情API接口申请指南

京东详情接口 API 是淘宝开放平台提供的一种 API 接口&#xff0c;它可以帮助开发者获取淘宝商品的详细信息&#xff0c;包括商品的标题、描述、图片等信息。在淘宝电商平台的开发中&#xff0c;京东详情接口 API 是非常常用的 API&#xff0c;因此本文将详细介绍京东详情接口 …

VS+QT+Opencv使用YOLOv4对视频流进行目标检测

对单张图像的检测&#xff0c;请参考&#xff1a;https://blog.csdn.net/qq_45445740/article/details/109659938 #include <fstream> #include <sstream> #include <iostream> #include <opencv2/dnn.hpp> #include <opencv2/imgproc.hpp> #inc…

支付整体架构

5.4 支付的技术架构 架构即未来&#xff0c;只有建立在技术架构设计良好的体系上&#xff0c;支付机构才能有美好的未来。如果支付的技术体系在架构上存在问题&#xff0c;那么就没有办法实现高可用性、高安全性、高效率和水平可扩展性。 总结多年来在海内外支付机构主持和参与…

C语言之位运算

一、什么是位运算 所谓位运算是指进行二进制位的运算 在系统软件中&#xff0c;常要处理二进位的问题 例如&#xff0c;将一个存储单元中的各二进位左移或右移一位&#xff0c;两个数按位相加等 二、位运算符和位运算 1、按位与 运算符(&) 参加运算的两个数据&#xff…

php 常用调试方式

要在PHP命令行中配置Xdebug&#xff0c;您需要完成以下步骤&#xff1a; 安装Xdebug扩展&#xff1a;首先&#xff0c;确保已经安装了Xdebug扩展。您可以通过在终端中运行php -m来检查是否安装了Xdebug扩展。如果没有安装&#xff0c;您可以按照官方文档或适用于您所使用的操作…

python正则表达式详解笔记,python正则表达式教学

正则表达式 正则表达式是一个特殊的字符序列&#xff0c;计算机科学的一个概念。通常被用来检索、替换那些符合某个模式(规则)的文本。 许多程序设计语言都支持利用正则表达式进行字符串操作。在Python中需要通过正则表达式对字符串进行匹配的时候&#xff0c;可以使用re模块…

Exploiting Proximity-Aware Tasks for Embodied Social Navigation 论文阅读

论文信息 题目&#xff1a;Exploiting Proximity-Aware Tasks for Embodied Social Navigation 作者&#xff1a;Enrico Cancelli&#xff0c; Tommaso Campari 来源&#xff1a;arXiv 时间&#xff1a;2023 Abstract 学习如何在封闭且空间受限的室内环境中在人类之间导航&a…

uniapp 获取 view 的宽度、高度以及上下左右左边界位置

<view class"cont-box"></view> /* 获取节点信息的对象 */ getElementRect() {const query uni.createSelectorQuery().in(this);query.select(".cont-box").boundingClientRect(res > {console.log(res);console.log(res.height); // 10…