面试常问:为什么 Vite 速度比 Webpack 快

 前言

最近作者在学习 webpack 相关的知识,之前一直对这个问题不是特别了解,甚至讲不出个123....,这个问题在面试中也是常见的,作者在学习的过程当中总结了以下几点,在这里分享给大家看一下,当然最重要的是要理解,这样回答的时候就不用死记硬背了。

原因

1、开发模式的差异

在开发环境中,Webpack 是先打包再启动开发服务器,而 Vite 则是直接启动,然后再按需编译依赖文件。(大家可以启动项目后检查源码 Sources 那里看到)

这意味着,当使用 Webpack 时,所有的模块都需要在开发前进行打包,这会增加启动时间和构建时间。

Vite 则采用了不同的策略,它会在请求模块时再进行实时编译,这种按需动态编译的模式极大地缩短了编译时间,特别是在大型项目中,文件数量众多,Vite 的优势更为明显。

Webpack启动

Vite启动

2、对ES Modules的支持

现代浏览器本身就支持 ES Modules,会主动发起请求去获取所需文件。Vite充分利用了这一点,将开发环境下的模块文件直接作为浏览器要执行的文件,而不是像 Webpack 那样先打包,再交给浏览器执行。这种方式减少了中间环节,提高了效率。

什么是ES Modules?

通过使用 exportimport 语句,ES Modules 允许在浏览器端导入和导出模块。

当使用 ES Modules 进行开发时,开发者实际上是在构建一个依赖关系图,不同依赖项之间通过导入语句进行关联。

主流浏览器(除IE外)均支持ES Modules,并且可以通过在 script 标签中设置 type="module"来加载模块。默认情况下,模块会延迟加载,执行时机在文档解析之后,触发DOMContentLoaded事件前。

3、底层语言的差异

Webpack 是基于 Node.js 构建的,而 Vite 则是基于 esbuild 进行预构建依赖。esbuild 是采用 Go 语言编写的,Go 语言是纳秒级别的,而 Node.js 是毫秒级别的。因此,Vite 在打包速度上相比Webpack 有 10-100 倍的提升。

什么是预构建依赖?

预构建依赖通常指的是在项目启动或构建之前,对项目中所需的依赖项进行预先的处理或构建。这样做的好处在于,当项目实际运行时,可以直接使用这些已经预构建好的依赖,而无需再进行实时的编译或构建,从而提高了应用程序的运行速度和效率。

4、热更新的处理

在 Webpack 中,当一个模块或其依赖的模块内容改变时,需要重新编译这些模块。

而在 Vite 中,当某个模块内容改变时,只需要让浏览器重新请求该模块即可,这大大减少了热更新的时间。

总结

总的来说,Vite 之所以比 Webpack 快,主要是因为它采用了不同的开发模式充分利用了现代浏览器的 ES Modules 支持使用了更高效的底层语言并优化了热更新的处理。这些特点使得 Vite在大型项目中具有显著的优势,能够快速启动和构建,提高开发效率。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安全、合规、提质增效,南方某电网公司如何通过代码审计保障能源数字化转型?

​南方某电网公司供电营业区覆盖十几个州市,是所在省域电网运营和交易的主体,也是承担对外供电和培育电力支柱产业的重要企业。近年来该电网公司在数字化转型方面深耕细作,紧跟工业互联网的时代浪潮,打造设备智慧运维数字化场景&a…

Elasticsearch:ES|QL 入门 - Python Notebook

数据丰富在本笔记本中,你将学习 Elasticsearch 查询语言 (ES|QL) 的基础知识。 你将使用官方 Elasticsearch Python 客户端。 你将学习如何: 运行 ES|QL 查询使用处理命令对表格进行排序查询数据链式处理命令计算值计算统计数据访问列创建直方图丰富数…

数据结构从入门到精通——冒泡排序

冒泡排序 前言一、冒泡排序的基本思想二、冒泡排序的特性总结三、冒泡排序的动画演示四、冒泡排序的具体代码test.c 前言 冒泡排序是一种简单的排序算法,通过重复遍历待排序数列,比较相邻元素的大小并交换位置,使得每一轮遍历后最大&#xf…

蓝桥杯 2023 省A 更小的数

主要思路: 输入一个长度为n的字符串,用二维数组dp[i][j]来记录子串[i, j]是否需要反转一次才能满足条件。使用动态规划自底向上地填充dp数组。根据问题的要求,需要考虑字符串的子串中字符的大小关系来判断是否需要反转。最后统计满足条件的子…

小红书,已破!支持无水印批量下载

在我们刷小红书时,经常会遇到自己喜欢的头像/壁纸/背景图图片或各大博主发布的视频教程,想保存下载使用和后续的查看,但保存下载后发现图片或视频右下角保留小红书的水印,很影响使用查看的体验。 所以本期文章最软库给大家分享一…

3D高斯泼溅的崛起

沉浸式媒体领域正在以前所未有的速度发展,其中 3D 高斯溅射成为一项关键突破。 这项技术在广泛的应用中看起来非常有前景,并且可能会彻底改变我们未来创建数字环境以及与数字环境交互的方式。 在本文中,我们将通过与摄影测量和 NeRF 等前辈进…

JAVA_会话

会话技术 1.会话: 一次会话包含多次请求和响应 2.功能: 在一次会话的范围内的多次请求,共享数据 3.方式: 3.1.客户端会话技术 Cookie(甜点) 1.概念: 客户端会话技术,将数据保存到客户端 2.快速入门: 1.创建Cookie对象,绑定数据new Cookie(String name,String v…

3000+人使用,这套人力资源数据分析工具还能这么用

中国科学院自动化研究所(以下简称“自动化所”)成立于1956年,是中国科学院率先布局成立的“人工智能创新研究院”的总体牵头单位,是中国最早开展智能科学与技术基础理论、关键技术和创新性应用研究的科研机构,也是中国…

G1和ZGC垃圾回收器学习

前言 ​ 随着JDK17的占有率不断升高和SpringBoot3最低支持JDk17,JDK17很大概率会成为大家后续升级的一个选择,而JDK17上最重要的垃圾回收器G1和ZGC,也就显得格外重要。大家提前了解或者学习一下肯定是有用的。 ​ 本篇文章也默认大家了解一…

Python 全栈体系【四阶】(十五)

第五章 深度学习 一、基本理论 1. 深度学习概述 1.1 引入 1.1.1 人工智能划时代事件 2016 年 3 月,Google 公司研发的 AlphaGo 以 4:1 击败世界围棋顶级选手李世石。次年,AlphaGo2.0 对战世界最年轻的围棋四冠王柯洁,以 3:0 击败对方。背后…

PCB板的叠构剖析及实际案例

PCB板可以有不同的层叠结构,具体取决于电路设计的要求和应用的复杂性。 以下是一些常见的PCB板叠构,包括单层、双层和多层PCB: 单层PCB(Single-Layer PCB): 基本结构: 单层PCB由一个绝缘性基板组…

sqllab第二十八关通关笔记(附带28a)

知识点: union select 整体过滤 union all select 替换where id(输入)空格 过滤了,使用%09代替 经过不断的测试,发现原始语句为 where id(输入) 构造payload:id1)and%091(1 成功回显出了相关的信息 好,尝试进行错误注入 构造…

理解树的结构-算法通关村

理解树的结构-算法通关村 1.树的结构 树是一个有n个有限节点组成一个具有层次关系的集合,每个节点有0个或者多个子节点,没有父节点的节点称为根节点,也就是说除了根节点以外每个节点都有父节点,并且有且只有一个。树的种类比较多…

如何自定义异常类

如何自定义异常类 为什么要使用自定义异常类? 在 Java 中,自定义异常是指用户根据自己的需求创建的异常类。Java 提供了一些预定义的异常类,如 NullPointerException、ArrayIndexOutOfBoundsException 等,但有时这些预定义的异常…

直播预告!5位大厂测开学长学姐助力你上岸测开

大家好,我是洋子,24届春招补录&25届暑期实习招聘已经进入到白热化阶段,近期收到了很多同学关于求职问题的咨询,所以开一场公益直播来为大家答疑解惑 主题:校招测试开发求职如何准备&职业发展 时间&#xff1…

十二、MySQL 主从复制+高可用+读写分离

目录 一、mysqlkeeplived实现高可用LVS负载均衡 一、什么是高可用 二、为什么要用高可用 三、高可用的作用 四、keeplived 是什么?它用在哪里 五、安装mysql以及配置主从 六、keepalived安装 1、配置 单VIP 实现高可用 master上配置 2、backup上的配置 3、…

蓝桥杯-礼物-二分查找

题目 思路 --刚开始想到暴力尝试的方法,但是N太大了,第一个测试点都超时。题目中说前k个石头的和还有后k个石头的和要小于s,在这里要能想到开一个数组来求前n个石头的总重,然后求前k个的直接将sum[i]-sum[i-k-1]就行了&#xff0…

@EnableConfigurationProperties注解使用

前言 当我们想把配置的内容,动态赋值到某个配置类上的时候,可以使用EnableConfigurationProperties ConfigurationProperties注解 代码准备 创建配置文件prop.properties nameada age18 email123qq.com 创建配置类 ComponentScan("com.test.pops") PropertySo…

天地一体化5G网络中LNA的辐射效应

Youssouf A S, Habaebi M H, Hasbullah N F. The radiation effect on low noise amplifier implemented in the space-aerial–terrestrial integrated 5G networks[J]. IEEE Access, 2021, 9: 46641-46651. 图2 面向卫星的5G综合网络架构方案 这篇论文《The Radiation Effect…

docker快速安装达梦数据库

docker快速安装达梦数据库 文章目录 docker快速安装达梦数据库前言环境准备下载镜像运行、配置容器 前言 因为公司需要将自己的底代码平台与客户的需求做适配,客户要求必须满足信创要求,使用达梦数据库。所以需要将原有的MySQL数据库与达梦数据库适配&a…