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 的兼容性更佳,在未来将变得更加重要。

相关推荐
Southern Wind2 分钟前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao23 分钟前
Rspack 原理:webpack,我为什么不要你
前端
yinuo26 分钟前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽28 分钟前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户984022766791829 分钟前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔29 分钟前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖30 分钟前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮36 分钟前
从0到1搭一个monorepo项目(一)
前端·javascript·git
水冗水孚40 分钟前
fastify-sse-v2搭配EventSource实现SSE中的AI流式回复打字机效果&Fetch+ReadableStream+Chunked分块也可实现
node.js
m0_7414122440 分钟前
大文件上传与文件下载
前端