前端构建工具对比 webpack、vite、esbuild等

人类和动物最大的区别是会使用工具,工具的作用就是提升我们的生产效率,同样,随着前端工程化的演进,伴随着一些优秀的工程化的生产效率工具,今天就来聊一聊,前端工程中的构建工具。

前端构建工具按照功能可以分为如下两大类:

  • 转译 - 将高级语法转换为低级的语法结构,把浏览器不能识别的文件,转换成浏览器能识别的文件;
  • 打包 - 将项目中的更重资源文件(如 html,css,json 等文件)打包压缩优化成想要的结果。

打包工具

工具名称 底层实现语言 优点 缺点 github star
webpack js 1. 作用:将多个模块打包成一个或多个文件,并对文件进行优化压缩,提高页面的加载速度和体验 2. 支持 CommonJS、AMD、ES6 等模块化规范; 3. 生态丰富,有丰富的插件系统 1. 构建速度较慢; 2.打包体积大; 3.上手难度大,需要复杂的配置,依赖项管理比较复杂; 63.9K
vite ts 相比webpack 更快的打包速度,易上手,简单,更快的开发体验; 1. 对旧版本的浏览器的兼容不好,因为它是基于ES模块化进行开发的; 2. 生态相比webpack 来说没那么成熟 62.6k
parcel js 比 vite 还简单,自动化无需配置,号称零配置 生态弱,缺少一些高级功能 42.9k
esbuild go 最快,官方给出的速度对比是其他工具的近百倍 配置灵活度低,生态较弱 36.7k
gulp js 基于node.js 可以跨平台运行 ,插件机制扩展性强,非常灵活 1.它没有模块化,属于 jquery 的时代; 2.配置复杂、功能少,因为过于灵活反而考验开发者的经验和技能 32.8k

转译工具

工具名称 作用
babel 将ES6 和更高级的语法转换为 ES5
tsc 将ts 文件转译成js 文件
相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
甜瓜看代码7 小时前
1.
react.js·node.js·angular.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js