webpack和vite的区别是什么

Webpack 和 vite 都是现在前端领域比较流行的打包工具,它们的相似之处在于可以帮助我们把多个 JavaScript 文件打包成一个可以在浏览器中加载并在生产中使用的文件。

Webpack 和 vite 主要区别:网上有很多总结大致分为三种,编译方式不同、开发效率不同、扩展性不同。其实在我看来只有一种半,一是编译方式,半个是生态。其实这半个也算是硬加上去的,以现在vite的发展势头,用不了多久它的生态不会弱于webpack。

那么下面来说一说为什么三个不同在我看来只是编译方式的差异:

1.Webpack 是基于 Node.js 构建的,而 Vite 则是基于 esbuild 进行预构建依赖。esbuild 是采用 Go 语言编写的,Go 语言是纳秒级别的,而 Node.js 是毫秒级别的。因此,理论上Vite 在打包速度上相比Webpack 有 10-100 倍的提升。

2.Vite使用的 rollup (注:Rollup 是 ESModule 的产物),在 Tree Shaking 上有着天然的优势,打包体积更小,运行速度更快。webpack使用的是nodejs默认的模块系统:commonjs,借助nodejs提供的API来操作待打包项目的源文件(如fs模块、path模块等)。

ESModule 和 CommonJS 都是模块化的标准化方案,但它们在加载模块时的实现方式不同。

CommonJS require 是同步加载模块,也就是说,一个模块在被引入后,引入模块的代码会等待模块加载完成才继续往下执行。

CommonJS 模块是 ESModule 提出前的一种暂时性解决方案,未来发展缓慢。

而 ESModule import 是异步加载模块,它允许浏览器在解析 JavaScript 代码时,将模块的加载放到后台去,让执行线程不被阻塞。这种并行加载的方法能够提高 JavaScript 代码的执行效率。

ESModule 可以在编译时进行静态优化,还支持 Tree shaking,可以在代码打包时删除未使用的代码,从而减少打包后代码的体积和加载时间,这也是 ESModule 比 CommonJS 更快的原因之一。同时还提供了一些高级特性,比如循环引用和实时绑定

最关键的两个原因就是 TreeShaking 和 异步加载

同时 ESModule 的兼容性更佳,在未来将变得更加重要。

相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript