在vue3的开发环境中为什么使用vite而不是用webpack

1、vite在开发阶段没有打包过程,直接启动一个服务器

2、请求一个模块到开发服务器

3、开发服务器编译模块,根据页面用所需要的依赖去加载文件

4、加载完成后,开发服务器把编译的结果返回给页面

这使得提高了我们在开发阶段运行的效率

vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。由于现代浏览器本身就支持ES Moudule,会自动向依赖的Module发出请求。

vite成功利用这一点,将开发环境下的模块文件,作为浏览器要执行的文件,而不是像webpack那样进行打包合并。

由于vite在启动的时候不需要打包,也就意味着不需要分析模块的依赖,不需要编译,因此启动速度非常块

当浏览器请求某个模块时,在根据需要对模块内容进行编译。这种按需动态编译的方式,极大的缩减了编译时间,项目越复杂,模块越多,vite的优势越明显。

在HMR方面,当改动一个模块后,仅需让浏览器重新请求该模块即可,不像webpack那样需要把该模块的相关依赖模块全部编译一次,效率更高

当需要打包到生产环境时,vite使用传统的rollup进行打包,因此,vite的主要优势在开发阶段。另外,由于vite利用的是ES Module,因此在代码中不可以使用CommonJS

参考链接

https://cn.vitejs.dev/guide/why.html

相关推荐
treasure14013 小时前
【复古】浅尝Django前后端不分离
前端·css·python·django·bootstrap·html·web
jay神14 小时前
基于 YOLOv8 的手势识别系统(Web 版)
前端·人工智能·python·深度学习·yolo·计算机视觉·计算机毕业设计
屏什么录14 小时前
长时间录屏中途崩溃:MP4 打不开的 6 种救回方案与参数设置
前端·音视频开发
code_Bo15 小时前
不只命令行:我把跨 Agent 会话同步做成了桌面应用
前端·javascript·后端
kyriewen15 小时前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
涛涛ing16 小时前
2026年最值得关注的前端变化,藏在“默认值”里
前端
亿元程序员18 小时前
太牛了!这AI做出来的游戏,居然还能变现!
前端
hellice18 小时前
闪传 FlashDrop 实战:我用 300 行 Node 代码做了个「4 位取件码」临时文件中转站
前端·产品
用户08297732600518 小时前
RTX 5500 MIG 踩坑记录:切分之后模型跑不起来,排错整整一下午
前端
Lank_M18 小时前
AI 放大后的图更清楚,但它不能当原图入库
前端