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 分钟前
解除有些网站不能复制的终极办法
前端·chrome
愚昧之山绝望之谷开悟之坡19 分钟前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_1729 分钟前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
golang学习记29 分钟前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽31 分钟前
flutter中 getx 的使用
前端
Jay丶1 小时前
聊聊入职新公司两个月,试用期没过这件事
前端·面试
ZTeam前端全栈进阶圈1 小时前
Vue新技巧:<style>标签里的 CSS 也能响应式!
前端
ღ_23331 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·javascript·vue.js
摸着石头过河的石头1 小时前
JavaScript继承的多种实现方式详解
前端·javascript
ybb_ymm1 小时前
前端开发之ps基本使用
前端·css