前端构建工具对比 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 文件