在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

相关推荐
卡兰芙的微笑11 分钟前
get_property --Cmakelist之中
前端·数据库·编辑器
覆水难收呀14 分钟前
三、(JS)JS中常见的表单事件
开发语言·前端·javascript
猿来如此呀21 分钟前
运行npm install 时,卡在sill idealTree buildDeps没有反应
前端·npm·node.js
hw_happy27 分钟前
解决 npm ERR! node-sass 和 gyp ERR! node-gyp 报错问题
前端·npm·sass
FHKHH31 分钟前
计算机网络第二章:作业 1: Web 服务器
服务器·前端·计算机网络
视觉小鸟1 小时前
【JVM安装MinIO】
前端·jvm·chrome
二川bro2 小时前
【已解决】Uncaught RangeError: Maximum depth reached
前端
qq22951165023 小时前
python毕业设计基于django+vue医院社区医疗挂号预约综合管理系统7918h-pycharm-flask
前端·vue.js·express
八了个戒3 小时前
Koa (下一代web框架) 【Node.js进阶】
前端·node.js
Sca_杰3 小时前
vue2使用npm引入依赖(例如axios),报错Module parse failed: Unexpected token解决方案
前端·javascript·vue