在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

相关推荐
已读不回1431 分钟前
设计模式-工厂模式
前端·算法·代码规范
郭少1 分钟前
🔥 我封装了一个会“思考”的指令!Element-Plus Tooltip 自动检测文本溢出,优雅展示
前端·vue.js·性能优化
谢泽豪2 分钟前
解决 uniapp 修改index.html文件不生效的问题
前端·uni-app
袁煦丞2 分钟前
【黑科技指南】自托管私人导航站Dashy:cpolar内网穿透实验室第476个成功挑战
前端·程序员·远程工作
heartmoonq6 分钟前
关于前端监控用户行为导致的报错
前端
已读不回1436 分钟前
告别痛苦的主题切换!用一个插件解决 Tailwind CSS 多主题开发的所有烦恼
前端·架构
JSPanda6 分钟前
Webpack插件开发避坑指南:三招制服Dev Server兼容性
webpack·node.js
pepedd8646 分钟前
🚀Webpack 从入门到优化,一文全掌握!
前端·webpack·trae
TimelessHaze7 分钟前
【面试考点】从URL输入到页面展示
前端·trae
玲小珑9 分钟前
LangChain.js 完全开发手册(一)AI 应用开发入门
前端·langchain·ai编程