为什么 Vite 速度比 Webpack 快?

一、webpack会先进行编译,再运行,vite会直接启动,再按需编译文件。

首先看两张图,可以清晰的看到,上面的图是webpack编译过的,而下面的图是vite直接使用工程内文件。

二、区别于Webpack先打包的方式,Vite利用ES Modules,将开发环境下的模块文件直接作为浏览器执行文件。

ES Modules是指通过export和import语句,允许再浏览器端导入导出模块。开发者实际上构建了一个依赖关系图,主流浏览器是直接支持的,vite正是利用这点。

三、Nodejs是毫秒级的,Go是纳秒级的,Webpack是基于Node.js构建的,Vite是基于esbuild预构建的,esbuild是Go语言编写的,打包速度Vite也更优。

四、在Webpack中,模块更新是需要重新编译的,而Vite只需要让浏览器重新请求。

综上所述,Vite比webpack更快的原因有4:

  1. 编译模式不同
  2. 对浏览器的利用不同(Vite利用了现代浏览器的esModules)
  3. 底层语言不同
  4. 热更新处理不同
相关推荐
娃哈哈哈哈呀1 小时前
Vue 3 动态 ref 的使用方式(表格)
前端·javascript·vue.js
2401_896008193 小时前
GCC 使用说明
前端·javascript·算法
守城小轩6 小时前
JavaScript vs Python 用于 Web Scraping(2025):终极对比指南
前端·chrome·chrome devtools·指纹浏览器·浏览器开发·超级浏览器
风逸hhh9 小时前
python打卡day29@浙大疏锦行
开发语言·前端·python
LuckyLay9 小时前
Vue百日学习计划Day33-35天详细计划-Gemini版
前端·vue.js·学习
ᖰ・◡・ᖳ9 小时前
JavaScript:PC端特效--缓动动画
开发语言·前端·javascript·css·学习·html5
会飞的鱼先生10 小时前
vue2、vue3项目打包生成txt文件-自动记录打包日期:git版本、当前分支、提交人姓名、提交日期、提交描述等信息 和 前端项目的版本号json文件
前端·vue.js·git·json
!win !11 小时前
uni-app项目从0-1基础架构搭建全流程
前端·uni-app
c_zyer11 小时前
使用 nvm 管理 Node.js 和 npm 版本
前端·npm·node.js
布Coder11 小时前
前端 vue + element-ui 框架从 0 - 1 搭建
前端·javascript·vue.js