webpack与 vite 的不同, vite的速度提升在哪里

简介: webpack与 vite 的不同, vite的速度提升在哪里

vite: https://github.com/vitejs/vite

谈谈你对vite的理解,最好对比webpack说明

webpack 原理图


20201110101541703.png


vite 原理图


20201110101622933.png


答案:


webpack会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。


而vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。


由于现代浏览器本身就支持ES Module,会自动向依赖的Module发出请求。vite充分利用这一点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack那样进行打包合并。


由于vite在启动的时候不需要打包,也就意味着不需要分析模块的依赖、不需要编译,因此启动速度非常快。当浏览器请求某个模块时,再根据需要对模块内容进行编译。这种按需动态编译的方式,极大的缩减了编译时间,项目越复杂、模块越多,vite的优势越明显。


在HMR(热更新)方面,当改动了一个模块后,仅需让浏览器重新请求该模块即可,不像webpack那样需要把该模块的相关依赖模块全部编译一次,效率更高。


当需要打包到生产环境时,vite使用传统的rollup(也可以自己手动安装webpack来)进行打包,因此,vite的主要优势在开发阶段。另外,由于vite利用的是ES Module,因此在代码中(除了vite.config.js里面,这里是node的执行环境)不可以使用CommonJS

相关文章
|
6月前
|
缓存 前端开发
Vite 和 Webpack 的区别
Vite 和 Webpack 的区别
223 0
|
13天前
|
前端开发 JavaScript 开发者
工程化(webpack+vite)
在现代前端开发中,工程化是提高开发效率和项目质量的关键。UniApp 结合 Webpack 和 Vite,提供强大的工程化支持。Webpack 功能强大,支持复杂项目的构建;Vite 则利用现代浏览器的 ESM 特性,提供快速的开发体验。开发者可根据项目需求选择合适的工具,显著提升开发效率和项目质量。
|
26天前
|
前端开发 JavaScript 开发者
工程化(webpack+vite)
工程化(webpack+vite)
|
2月前
|
前端开发 JavaScript 开发者
工程化(webpack+vite)
工程化(webpack+vite)
|
3月前
|
缓存 JavaScript 前端开发
用 vite 2 平滑升级 vue 2 + webpack 项目实战
用 vite 2 平滑升级 vue 2 + webpack 项目实战
|
前端开发 JavaScript
vite和webpack 区别
vite和webpack 区别
83 0
|
6月前
|
前端开发 JavaScript 开发者
如何在Vite和Webpack之间选择合适的构建工具?
【4月更文挑战第14天】选择Vite或Webpack取决于项目需求、团队熟悉度和场景。Vite适合快速开发,小到中型项目,Vue.js技术栈,有较简单的配置和快速冷启动。而Webpack在大型项目中占优,提供深度优化,丰富的插件生态系统,适合复杂构建需求和React项目。考虑因素还包括学习曲线和社区支持,最佳工具应满足项目当前及未来需求。
70 2
|
6月前
|
前端开发 JavaScript 开发者
vite和webpack区别
【4月更文挑战第14天】Vite与Webpack都是前端构建工具,各有特点。Vite凭借原冷启动和模块热更新,适合现代前端项目,尤其是Vue、React等。它的配置简单,但社区支持较小。相比之下,Webpack拥有强大的插件系统和广泛社区支持,能适应各种项目需求,但配置复杂,启动慢。开发者应根据项目需求选择合适的工具。
156 2
|
6月前
|
前端开发 JavaScript Go
webpack -vite(Rollup )-Gulp (一)
webpack -vite(Rollup )-Gulp (一)
110 0
|
6月前
|
JavaScript 开发者
Vite和Webpack的区别是什么
Vite和Webpack的区别是什么
下一篇
无影云桌面