在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

相关推荐
IT_陈寒12 小时前
Vite动态导入差点让我秃头,原来问题出在这
前端·人工智能·后端
白泽_hunter13 小时前
项目里最常见的 5 个 this 指向坑:从规则到实战彻底讲透
前端
宿67413 小时前
vue3-pinia
前端·vue.js
白泽_hunter13 小时前
搞懂 JS 数据类型:从 typeof 到手写完整类型判断,一张图理清
前端
日光倾13 小时前
TypeScript 随手记 —— 1
前端·javascript·typescript
自学it的攻城狮14 小时前
elpis-core ,koa实现的系统底座, 沉淀80% 的通用能力,剩下20% 用于定制化开发
前端
CappuccinoRose14 小时前
模块化体系
前端·import·export·es modules
AIDANHANG15 小时前
放开靠时间戳对日志前先核请求ID跨服务传播与采样关联
前端·人工智能
半生过往16 小时前
前端学 Java 课程笔记
java·前端·笔记
广州华水科技17 小时前
2026年单北斗GNSS变形监测系统推荐,破解水库安全监测难题
前端