前端构建工具对比 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 文件
相关推荐
2501_915918413 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
JavaScript二叉树相关概念
前端
attitude.x5 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java5 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)5 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术6 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫6 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css