在市面上不仅只有Webpack这一个前端构建工具，还有很多优秀的竞品，这一篇文章就准备好好聊聊这些竞品
目前市面上除了Webpack，还有如下优秀的前端构建工具可供选择：
- Gulp
- Grunt
- Esbuild
- Rollup
接下来就准备逐一介绍它们，了解下它们与Webpack的异同
Gulp
首先援引下官方对于它的定义：gulp将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。官方对于它的特点归纳如下：
- 简单：代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单
- 高效：基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。
- 生态：遵循严格的准则，确保我们的插件结构简单、运行结果可控。
Gulp的定位是一个 基于流的自动化构建工具，它将繁琐的工作(js代码压缩、js代码合并等)封装成一个一个task，然后通过pipe的方式依次自动完成我们配置的task，最终实现自动化打包构建的目的
可以看出Gulp执行任务时是需要严格按照我们 定义的顺序 执行的，也就是所谓的 管道操作流程，从而可以严格规范我们的项目打包流程，但是由于它主要是针对多页应用进行打包构建的，所以在这个SPA大行其道的今天，它的声音越来越小也就不足为奇了
Grunt
首先援引下官方对于它的定义：javaScript 世界的构建工具。
Grunt跟Gulp的定位是一样的，都是用于 规范前端构建流程，将一些重复工作交给Grunt来处理。只不过Grunt是以 任务 为核心来搭建构建流程，用户定义的任务可以单独执行，也可以组合多个任务串行，具有较高的灵活性
目前Grunt基本已经被淘汰了，但毫无疑问的是Grunt对于前端领域的发展贡献了自己的力量，所以不应该被我们忘记
Esbuild
首先援引下官方对于它的定义：An extremely fast JavaScript bundler，翻译一下它就是一个非常高效的js打包工具，官方对于它的特点归纳如下：
- Extreme speed without needing a cache(在没有缓存的情况也能有极致的性能)
- ES6 and CommonJS modules(支持ES6和cjs模块)
- Tree shaking of ES6 modules(支持ES6的Tree shaking)
- TypeScript and JSX syntax(原生支持typescript和jsx打包)
- Source maps(支持Source Map)
- Minification(代码压缩)
- Plugins(支持定义插件)
Esbuild的核心卖点就是 快，下面的图展示了它与其他打包工具的速度差异
那它为什么会这么快呢？主要原因有如下几点
- ESbuild采用 Go 来编写，Go属于 编译型 语言，所以在打包构建阶段只需要解析我们的业务代码，而Esbuild本身的代码已经编译成了 机器码，是可以直接运行的。而其他的打包工具大多是用 js 编写，那么在构建阶段就会首先去解析 打包工具 本身的代码，然后才去解析业务代码，因此所花费的时间肯定是会更长的
- Go语言本身支持 多线程，可以充分利用cpu多核的性能，同时所有的线程共享内存空间，因此线程之间的通信十分方便，而js虽然可以使用 worker线程 的技术开启多线程，但是每个线程都是各自拥有自己的内存空间，想要通信的话得通过 postMessage 的方式，这样也会显著增加通信开销，最终导致性能的损失
- Esbuild自己实现了对于js，ts，jsx等转换编译工作，而不是依靠第三方插件，这样能最大程度保证数据结构的一致性，降低各个环节交互的成本，从而提升性能
Esbuild虽然快，但是并不适合构建web应用，因为它放弃对less、stylus、sass、vue、angular 等资源的支持，放弃 MF、HMR、TS 类型检查等功能。因此它更适合做一些js代码库的打包工具，或者基于它封装更上层的打包工具，如Vite之类
Rollup
首先援引下官方对于它的定义：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序
Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验
Rollup的定位主要是用于 js库 的打包，像Vue、React、Angular都是用的Rollup进行打包的，它有如下优点
- 因为基于Es Module进行设计，所以可以充分利用其静态分析的能力，从而提供更好的tree-shaking支持
- 编译出来的代码简洁，可读性好
- 互相依赖的模块被编译进一个函数内，执行效率更高
- 支持多种输出格式，如 IIFE, AMD, CJS, UMD, ESM
它的缺点如下：
- 不支持HMR
- 对于非ESM格式的模块不能可靠地处理
- 不支持代码拆分
- 不支持运行时动态加载
结语
通过这篇文章，我们了解到除了Webpack之外，还有许多优秀的前端构建工具，正是因为有它们，现在的前端圈才能欣欣向荣，百家争鸣。对于我们来说，能根据业务场景正确地选择构建工具是作为一个高级前端的基本素养，所以，加油吧，骚年！
