在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

相关推荐
柯腾啊1 分钟前
一文简单入门 Axios
前端·axios·apifox
im_AMBER15 分钟前
React 15
前端·javascript·笔记·学习·react.js·前端框架
How_doyou_do33 分钟前
模态框的两种管理思路
java·服务器·前端
snow@li1 小时前
前端:前端/浏览器 可以录屏吗 / 实践 / 录制 Microsoft Edge 标签页、应用窗口、整个屏幕
前端·浏览器录屏·前端录屏·web录屏
李贺梖梖1 小时前
CSS学习
前端·css
蚂小蚁1 小时前
一文吃透:宏任务、微任务、事件循环、浏览器渲染、Vue 批处理与 Node 差异(含性能优化)
前端·面试·架构
狼性书生1 小时前
uniapp实现的Tab 选项卡组件模板
前端·uni-app·vue·组件·插件
吃饺子不吃馅1 小时前
前端画布类型编辑器项目,历史记录技术方案调研
前端·架构·github
拜晨2 小时前
使用motion实现小宇宙贴纸墙效果
前端·交互设计