在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

相关推荐
光影少年5 分钟前
vue中,created和mounted两个钩子之间调用时差值受什么影响
前端·javascript·vue.js
青苔猿猿8 分钟前
node版本.node版本、npm版本和pnpm版本对应
前端·npm·node.js·pnpm
Adorable老犀牛41 分钟前
安装npm:npm未随Node.js一起安装
npm·node.js
一只码代码的章鱼1 小时前
Spring的 @Validate注解详细分析
前端·spring boot·算法
zimoyin1 小时前
Kotlin 协程实战:实现异步值加载委托,对值进行异步懒初始化
java·前端·kotlin
cdcdhj1 小时前
vue用通过npm的webpack打包编译,这样更适合灵活配置的项目
vue.js·webpack·npm
程序员与背包客_CoderZ3 小时前
Node.js异步编程——Callback回调函数实现
前端·javascript·node.js·web
非凡ghost3 小时前
Pale Moon:速度优化的Firefox定制浏览器
前端·firefox
清灵xmf3 小时前
从 Set、Map 到 WeakSet、WeakMap 的进阶之旅
前端·javascript·set·map·weakset·weakmap
11054654014 小时前
11、参数化三维产品设计组件 - /设计与仿真组件/parametric-3d-product-design
前端·3d