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

前言

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

原因

1、开发模式的差异

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

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

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

Webpack启动

Vite启动

2、对ES Modules的支持

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

什么是ES Modules?

通过使用 export 和 import 语句,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在大型项目中具有显著的优势,能够快速启动和构建,提高开发效率。​

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

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

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

相关文章

面试六--TCP粘包问题

1.流式传输协议 流式传输协议(Streaming Protocol)是一种用于在网络上传输数据的通信协议,它允许数据以连续的流的形式进行传输,而不是一次性发送完整的数据包。流式传输协议即协议的内容是像流水一样的字节流,内容与内…

如何使用vue定义组件之——全局or局部

在Vue中定义一个组件,您需要使用Vue.component()方法来全局注册组件,或者在Vue实例的选项中局部注册组件,以下是一个具体的步骤? 1.全局注册组件: 使用Vue.component()方法来注册一个全局组件,这意味着这个…

Flutter第三弹:常用的Widget

目标: 1)常用的Widget有哪些?有什么特征? 2)开发一个简单的登录页面。 一、Flutter常用Widget 对于Flutter来说,一切皆Widget. 常用的Widget,包括一些基础功能的Widget. 控件名称功能备注…

代码随想录day19(2)二叉树:二叉树的最大深度(leetcode104)

题目要求:求出二叉树的最大深度 思路:首先要区分二叉树的高度与深度。二叉树的高度是任一结点到叶子结点的距离,而二叉树的深度指的是任一节点到根节点的距离(从1开始)。所以求高度使用后序遍历(从下往上&…

【小白学机器学习9】自己纯手动计算验证,EXCEL的一元线性回归的各种参数值

目录 0 目标 1 构造模型 1.1 构造模型的思路 1.2 具体模型构造的EXCEL公式和过程 2 直接用EXCEL画图,然后生成趋势线的方式进行回归分析 2.1 先选择“观测值Y”的数据,用散点图或者折线图作图 2.2 然后添加趋势线和设置趋势线格式 2.3 生成趋…

ttkefu如何更改头像

ttkefu头像如何更改: 第一种:可以直接点击头像-更改框就出来了

C语言(指针)单元练习二

1有以下程序&#xff1a; #include <stdio.h> void fun( int *a, int i, int j) { int t; if(i<j) { ta[i]; a[i]a[j]; a[j]t; fun(a,i,--j); } } main() { int a[]{1,2,3,4,5,6},i; fun(a,0,5); for(i0; i<6; i) printf("%d ",a[i]); retur…

前后端交互理解 简易表白墙(servlet)

前后端交互理解 简易表白墙&#xff08;servlet&#xff09; 文章目录 前后端交互理解 简易表白墙&#xff08;servlet&#xff09;后端核心内容前后端交互接口约定后端代码展示 上期介绍过 Servlet API &#xff0c;本篇文章目的是借助 servlet 做出一个完整的网站。在一个网站…

工作随记:oracle重建一张1T数据量的大表

文章目录 一、删除测试表二、重命名旧表&#xff1a;三、验证&#xff1a;四、检查alert日志和昨天到今天的统计信息任务收集是否正常 一、删除测试表 #xshell登录用户hthis用户连接登录处理&#xff1a; sqlplus ht/"123456" sqlplus ht/"123456"10.8.5.…

Docker 搭建 PaddleOCR

转自PaddleOCR docker模式 - 简书 目的: 公司要放弃第三方的ocr工具(日语),需要自己搭建训练一套,这篇是搭建 图片要标出文字的选取框 因为是日文所以ocr有专门的工具,只需要文字坐标就好如图 日文的账票需要加密一下 我得环境是 Ubuntu 22.04.1 LTS 1,下载代码 cd /hom…

AI-线性回归模型

线性回归应用场景 房价预测&#xff0c;通过分析房地产市场的历史数据&#xff0c;如房屋大小、位置、建造年份等因素&#xff0c;线性回归可以帮助预测未来房价的走势。 销售额预测&#xff0c;企业可以利用线性回归模型来预测产品的销售额&#xff0c;这通常涉及到产品价格、…

科研三维模型高精度三维扫描服务3d逆向测绘建模工业产品抄数设计

三维抄数技术在科研三维模型的应用已经日益广泛&#xff0c;其高精度、高效率的特点使得科研工作者能够更快速、更准确地获取和分析数据。这一技术的核心在于通过专业的三维扫描仪对实物进行高精度测量&#xff0c;再将这些数据转化为三维数字模型&#xff0c;为后续的研究提供…

QT c++ 双精度数拆分和组合 Tool

本文描述QT c的双精度数拆分和合并&#xff0c;即双精度浮点数拆为四个16位无符号整数以及将四个16位无符号整数组合为双精度浮点数。 开发平台&#xff1a;win10QT6.2.4 MSVC2019 64 bit 在本文的最好列出了代码和可执行文件打包下载链接&#xff08;可直接使用&#xff09;…

Challenge 4 - OSCP A

文章目录 wp141142140143144145wp 141 dirsearch扫描发现db目录,访问后得到一个sql文件。 里面可以看到用户名和密码 INSERT INTO `admin` (`id`, `username`, `password`, `firstname`, `lastname`, `photo`, `created_on`) VALUES (1, nurhodelta, $2y$10$fCOiMky4n5hCJx…

Mysql 死锁案例1-记录锁读写冲突

死锁复现 CREATE TABLE t (id int(11) NOT NULL,c int(11) DEFAULT NULL,d int(11) DEFAULT NULL,PRIMARY KEY (id),KEY c (c) ) ENGINEInnoDB DEFAULT CHARSETutf8;/*Data for the table t */insert into t(id,c,d) values (0,0,0),(5,5,5),(10,10,10) 事务1事务2T1 START…

linux 模拟shell

&#x1f493;博主CSDN主页:麻辣韭菜-CSDN博客&#x1f493;   ⏩专栏分类&#xff1a;http://t.csdnimg.cn/G90eI⏪   &#x1f69a;代码仓库:Linux: Linux日常代码练习&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Linux知识   &#x1f51d;&#x1f5…

BUU [FBCTF2019]RCEService

BUU [FBCTF2019]RCEService 开题&#xff0c;要求以json格式输入命令。 无任何信息泄露&#xff0c;源码如下&#xff1a; <?phpputenv(PATH/home/rceservice/jail);if (isset($_REQUEST[cmd])) {$json $_REQUEST[cmd];if (!is_string($json)) {echo Hacking attempt de…

阿里云第一次面试记录

java多态&#xff1f; 多态表示一个对象具有多种的状态&#xff0c;具体表现为父类的引用指向子类的实例 Fu f Zi z(); 多态是同一个行为具有多个不同表现形式或形态的能力。 多态就是同一个接口&#xff0c;使用不同的实例而执行不同操作 特点&#xff1a; 对象类型和引用类型…

Css基础——精灵图(sprites)和字体图标

1、精灵图 1.1、精灵图的由来 一个网页中往往会应用很多小的背景图像作为修饰&#xff0c;当网页中的图像过多时&#xff0c;服务器就会频繁地接收和发送 请求图片&#xff0c;造成服务器请求压力过大&#xff0c;这将大大降低页面的加载速度。 因此&#xff0c;为了有效地减…

搭建Hadoop集群

一、前言 虚拟机&#xff08;Virtual Machine&#xff09;指通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统。在实体计算机中能够完成的工作在虚拟机中都能够实现。 虚拟机是在一些开发测试工作中常常需要用到的功能&#xff0c;常见的虚拟机…