vite为什么编译比webpack快

启动速度:Vite在启动时不需要打包,因为它支持ES模块加载,不需要编译和打包所有模块的依赖。这意味着Vite在启动时不需要像Webpack那样构建整个项目的文件,因此启动速度更快。

1 vite 采用 es 新规范

vite 中的 main.ts 中可以直接使用 import,不需要对此进行解析,不需要将 es6 转成 es5

#vite 直接引入了 main.ts
<!DOCTYPE html>
<html lang="zh-CN"><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>#webpack 会将所有的文件编译打包成对应js文件,然后插入到 #app 节点后
<!DOCTYPE html>
<html lang="zh-cmn-Hans"><body><div id="app"></div><!--<script type="text/javascript" src="/static/js/chunk-vendors.js"></script><script type="text/javascript" src="/static/js/app.js"></script>--></body>
</html>

2 基于1,对于 node_modules 中的包文件,vite 会直接请求对应的文件

**xxx.js、xxx.vue **中遇到 import { xxx } from “包名”,并且当包名不以 / ./ ../ 开头

会进行字符串转换,将包地址转换为以 /node_modules/.vite 开头的相对或绝对路径

xxx.js 或 xxx.vue 转换后的路径
import { xxx } from "/node_modules/.vite/deps/vue.js?v=b3ae5e1f"
import _export_sfc from "/@id/__x00__plugin-vue:export-helper"#控制台直接请求的路径
http://localhost:5183/node_modules/.vite/deps/moment.js?v=b3ae5e1f
http://localhost:5183/node_modules/.vite/deps/vue-router.js?v=b3ae5e1f

在这里插入图片描述

基于直接请求了node_modules中的文件,在编译过程中,也能够直接读取本地缓存(vite 有自己的策略,当包更新时,能够通过改变 xxx.js?v=xxx值的方式请求到最新文件)

在这里插入图片描述

3 对于非node_moduels中的部分需要编译的部分,比如 ts 语法,jsx 语,Vite采用按需加载的方式,当请求某个模块时才会对该模块进行编译。

  • Vite 将所有的文件,如 xx.vue 进行路径 hmlrId 值处理
    在这里插入图片描述
  • vite 将 <script type="module" src="/@vite/client"></script> 置入到 html 页面顶部,开启 websocket监听,监听文件变化
    在这里插入图片描述
  • 将文件变化后,遍历变化的文件,计算出要更新的模块,发送 socket 信息,触发对应模块 import.meta.hot.accept 函数
# 消息列举
# /node_modules/.pnpm/vite@5.0.12/node_modules/vite/dist/client/env.mjs" 中的部分逻辑
# 目前很多时候发送的都是 full-reload,后面值得深究下async function handleMessage(payload) {switch (payload.type) {case 'connected':break;case 'update':break;case 'custom':break;case 'full-reload':break;case 'prune':break;case 'error':break;default:break}
}

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

camunda源代码编译运行(三):验证camunda API接口功能

接上一篇文章&#xff1a;camunda源代码编译运行&#xff08;二&#xff09;&#xff1a;构建并运行camunda源代码工程 4.1、发布流程模型 先通过camunda的流程设计器设计一个流程&#xff0c;命名为&#xff1a;UserTask Flow1&#xff0c;然后发布流程&#xff0c;发布流程…

C语言第二十九弹---浮点数在内存中的存储

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 目录 1、浮点数在内存中的存储 1.1、练习 1.2、浮点数怎么转化为二进制 1.3、浮点数的存储 1.3.1、浮点数存的过程 1.3.2、浮点数取的过程 1.3、题目解析…

jquery 简介与解析

jQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了诸如HTML文档遍历和操作、事件处理、动画以及Ajax操作等任务。jQuery的设计理念是“写得更少&#xff0c;做得更多”&#xff0c;这意味着通过jQuery&#xff0c;可以用更少的代码完成更多的工作。 主要特点&#xff…

Druid无法登录监控页面

问题表现&#xff1a;在配置和依赖都正确的情况下&#xff0c;无法通过配置的用户名密码登录Druid的监控页面 检查配置发现 配置的用户名和密码和请求中参数是一致的&#x1f914; Debug发现 ResourceServlet 是Druid的登录实现&#xff0c; 且调试发现usernameParam是null&am…

java集合解析-Collection 类型

Java 集合概览 Java 集合&#xff0c; 也叫作容器&#xff0c;主要是由两大接口派生而来&#xff1a; 一个是 Collection接口&#xff0c;主要用于存放单一元素&#xff1b; 另一个是 Map 接口&#xff0c;主要用于存放键值对。对于Collection 接口&#xff0c;下面又有三个…

骨传导什么牌子好?六大专业选购的黄金规则与避坑指导

谈论到运动时佩戴的耳机&#xff0c;骨传导耳机必须是话题中的热点。与传统耳机或入耳式耳机不同&#xff0c;骨传导耳机解放了你的耳道&#xff0c;让你在挥洒汗水的同时&#xff0c;也能享受音乐的魅力。更重要的是&#xff0c;它不会阻碍你听到周围的声音&#xff0c;这对于…

盘点自动化汽车生产线设备 数据采集分析联合各设备

1.机器人自动装配线 机器人自动装配线已成为汽车制造业中的常见场景。这些机器人在汽车组装的各个环节发挥关键作用&#xff0c;从焊接和铆接到零部件组装。它们不仅提高了装配速度&#xff0c;还确保了产品的一致性&#xff0c;降低了废品率。 2.3D打印技术 3D打印技术正在汽车…

医院信息系统(HIS):一文扫盲,算是所有信息系统里面复杂的

大家好&#xff0c;我是贝格前端工场&#xff0c;本期继续分享常见的B端管理系统&#xff0c;欢迎大家关注&#xff0c;如有B端写系统界面的设计和前端需求&#xff0c;可以联络我们。 一、什么是HIS系统 HIS系统&#xff08;Hospital Information System&#xff09;是医院信…

【操作系统】磁盘存储空间的管理

实验5 磁盘存储空间的管理 一、实验目的 磁盘是用户存放程序和数据的存储设备&#xff0c;磁盘管理的主要目的是充分有效地利用磁盘空间。本实验模拟实现磁盘空间的分配与回收&#xff0c;使学生对磁盘空间的管理有一个较深入的理解。 二、实验内容 实验任务&#xff1a;用位…

Canal + Kafka 同步 MySQL 数据到 Redis

解决缓存和数据库一致性问题 一般来说&#xff0c;缓存中的数据没什么问题&#xff0c;但是数据库更新后&#xff0c;就容易出现缓存&#xff08;Redis&#xff09;和数据库&#xff08;MySQL&#xff09;间的数据一致性问题。由于写和读是并发的&#xff0c;没法保证顺序&…

运营抖店为什么不能多选类目?什么类目适合新手来玩?

大家好&#xff0c;我是电商小布。 想要入驻抖音小店&#xff0c;必备的资质材料就是营业执照。 而执照上的范围&#xff0c;就是我们开店所能选择的经营类目。 有的小伙伴在开店的时候&#xff0c;并没有想明白自己是想要做什么&#xff0c;小店未来的发展方向是什么。 结…

Docker基础篇(四) 容器数据卷 容器间传递共享(--volumes-from)

容器间传递共享 当前没有运行的容器 两个数据卷&#xff1a; containVolum-01 containVolum-02 docker run -it --name zenA zen/centos 上面生成了容器 zenA ctrl P Q docker run -it --name zenB1 --volumes-from zenA zen/centos ctrl P Q docker run -it --name zen…

全球游戏市场回暖,Flat Ads推动海外获客增长

摘要:热门游戏品类分析,解读新兴市场与赛道 近日,中国音数协游戏工委发布了《2023年中国游戏出海研究报告》,据报告数据显示,2023年,全球游戏市场规模11773.79亿元,同比增长6.00%,呈现增长回暖趋势。 图源:伽马数据 1.SLG和RPG游戏热度居高不下,休闲游戏增长势头强劲 目前,S…

java 时间格式 YYYY 于yyyy的区别

java formatDate 时间时&#xff0c;经常需要输入格式比如 YYYYMMDD,yyyyMMdd 这两个是有区别的 具体每个参数可以看下面

左手“兑抵接”,右手债务逾期,华夏幸福离“上岸”还有多远?

撰稿|行星 来源|贝多财经 进入2024年&#xff0c;华夏幸福仍不太“幸福”。 近日&#xff0c;华夏幸福基业股份有限公司&#xff08;SH: 600340&#xff0c;下称“华夏幸福”&#xff09;发布了关于债务逾期、债务重组进展等事项的公告。内容显示&#xff0c;华夏幸福截至1月…

MybatisPlus--03--IService、ServiceImpl

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1. IService接口1.1 IService、ServiceImpl 接口的使用第一步&#xff1a;实现basemapper接口第二步&#xff1a;编写service类第三步&#xff1a;编写serviceImpl第…

白令海峡的题解

原题描述&#xff1a; 时间限制: 1000ms 空间限制: 524288kB 题目描述 很久很久以前&#xff0c;一座大陆桥横跨西伯利亚东端与美洲大陆西端。 处于进化早期的人类&#xff0c;正以部落的形式在大陆上游荡、捕猎&#xff0c;四海为家。在饥饿与寒冷折磨下&#xff0c;人…

开源软件:塑造软件行业未来的协作与创新之力

随着信息技术的迅猛发展&#xff0c;开源软件已经逐渐成为软件开发的潮流&#xff0c;以其独特的低成本、可协作性和透明度等特性&#xff0c;在全球范围内引起了广泛的关注和应用。越来越多的企业和个人选择使用开源软件&#xff0c;这不仅推动了软件行业的繁荣&#xff0c;还…

电路设计(27)——交通信号灯的multisim仿真

1.功能要求 使用数字芯片设计一款交通信号灯&#xff0c;使得&#xff1a; 主干道的绿灯时间为60S&#xff0c;红灯时间为45S 次干道的红灯时间为60S&#xff0c;绿灯时间为45S 主、次干道&#xff0c;绿灯的最后5S内&#xff0c;黄灯闪烁 使用数码管显示各自的倒计时时间。 按…