在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

相关推荐
AprChell9 小时前
低代码设计器和低代码设计引擎架构综述
前端·vue.js·低代码
Hilaku9 小时前
Node.js 还能再战十年?给你一个不换引擎的理由
前端·javascript·程序员
颜进强10 小时前
AI性能参数-截断、延迟与流式输出
前端·后端·ai编程
spmcor10 小时前
React 架构师之路:Next.js 全栈革命(第八篇)
前端·react.js
英勇无比的消炎药10 小时前
TinyRobot 源码深度分析:OpenTiny 的 AI 对话组件库
前端·vue.js·github
假如让我当三天老蒯10 小时前
React基础、进阶(学习用)
前端·react.js·面试
风骏时光牛马10 小时前
HTML十大经典实战代码案例合集
前端
weedsfly10 小时前
前端必知必会:从 IIFE 到 ESM,模块化到底在解决什么?
前端·javascript
笨鸟飞不快10 小时前
从单个服务到集群:一次完整的性能排查复盘
java·前端
糖拌西瓜皮10 小时前
TypeScript 进阶:泛型、条件类型、类型守卫与装饰器
javascript·node.js