webpack、rollup、vite、esbuild 前端构建工具到底有什么关系和区别？

一、为什么需要构建工具，前端构建工具具体干了些什么？

前端最开始的开发模式为HTML+JS+CSS，写起来痛不欲生，要直面js操作dom、浏览器兼容js / css、代码压缩、开发中要不断手动刷新等问题。直到nodeJS后，出现了angular、react、vue等基于nodejs的前端框架，但是各前端框架都有自己的语法和框架机制，而这些东西浏览器并不认识，所以就需要一个构建工具，将框架的东西转成浏览器认识的HTML+JS+CSS。

构建工具主要做了些什么事？

• 代码转换，例如将 ts 转换为 js 、jsx转换为js等。
• 浏览器兼容，例如将es6降级到es5、css添加浏览器前缀、添加补丁等。
• 代码压缩，js压缩、css压缩、gzip 压缩等。
• 代码拆分，将大体积文件进行分割，达到页面快速加载响应的效果等。
• 热更新，开发过程中修改代码后自动刷新页面，而不用手动去刷新。
• tree-shaking：打包过程中自动剔除没有使用的代码。
  … …

目前提及较多的构建工具有：比较老牌的webpack，在ESM出现后的较新工具：rollup、esbuild、vite等。此文主要记录他们之间的关系，内容主要来自各个大佬的博客，加上自己的理解，文章内容主要引用自：

webpack、rollup、vite、esbuild优劣势详解
Vite 是如何站在巨人的肩膀上实现的

后面出现的构建工具，都会与webpack进行比较，同时webpack也在进步，比如新版本webpack中的联邦模块。但在这些构建工具中，能对等webpack的其实只有vite，rollup和esbuild都有各自的重心以及局限性，不适合作为一个完整的web应用构建工具。总的来说：

• webpack是一个完整的web应用构建工具，提供各种资源处理、开发服务器和生产版本构建
• Vite是一个新型前端构建工具，基于esbuild和rollup的双引擎架构，默认的构建目标是支持Es模块的浏览器
• rollup专注于ES模块，追求的是小，更适合纯js类库的打包
• esbuild使用go语言开发，追求的是快

二、webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具，可以处理不同的资源文件。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

• 优势：
  • 支持 CommonJS、AMD、ESM 等多种模块化
  • 拥有各种plugin和loader处理各类型的资源文件，支持各种配置，高度的自定义
  • 可以实现代码转换、浏览器兼容、代码压缩、代码拆分、devServer、热更新等功能
  • 生态完整，基本上你需要的都能找到对应的插件实现
• 不足：
  • 构建速度慢：因为webpack构建时，先要构建出完整的依赖树，再根据依赖树进行代码分析、资源处理，所以随着项目内容的增多，构建也会越来越慢。特别在低版本中，构建依赖树时会和node_modules 下的一起分析，依赖的增多也会导致速度变慢。（但在webpack高版本中添加了联邦模块的内容，有效的解决了第三方依赖的构建问题。）
  • 热更新速度慢：因为修改代码时，webpack总要重新构建依赖树，导致热更新也会慢
  • 构建产物体积大：在构建过程中，webpack会将构架的代码转换为模块，并像模块中添加依赖项，因此输入的产物中，会出现一些webpack自己添加的东西，并不是那么“干净”
  • 配置复杂：因为高度的可自定义，各种的plugin和loader，学习难度较大，配置十分繁琐

三、rollup

rollup是一个专注于ES Modules的JavaScript打包器，基于ES6提出的ESM而出现的。

• 优势：
  • 专注于模块的 Tree-shaking（树摇）和代码的优化，以减少输出的文件大小。
  • 简单的配置（只打包ES模块的确很简单，但打包 CommonJS 模块时的配置，并不那么简单。。。）
  • 支持代码转换、浏览器兼容、代码压缩、代码拆分等功能
  • 构建产物体积小：相对于webpack比较干净（没有像webpack一样往代码里边添加了各种依赖工具等内容）
• 不足：
  • 更适合纯js类库的打包，而不是web应用，对js以外的资源支持不如webpack
  • 不支持HMR

四、esbuild

esbuild 是使用go语言编写的一个前端构建工具，相比使用nodejs的构建工具更快。

• 优势：
  • 使用go语言开发，运行时没有js的解释环节；多线程并行，比js的单线程串行化更快。
  • 内置部分loader使用go语言实现，相比其他工具的相同功能loader更快；可以直接使用内置loader对部分资源进行处理。
  • 配置简单
  • 支持多种模块格式，适用于任何类型的 JavaScript 项目
• 不足：
  • 生态不完善，很多社区插件有问题，或者需要手写插件，且很多插件只是包装了一下开源的东西，本质上还是js
  • 代码拆分鸡肋，只支持esm 格式，只能对动态 import 的内容或多入口同时用到的代码进行分割，无法做到像webpack一样将使用到的某个库单独打包出去。
  • 不支持 HMR
  • 没有提供AST能力，不能转换成兼容低版本浏览器代码
  • 不适合直接在生产环境使用，更适合作为一种偏底层的模块打包工具，而不是web应用打包

五、vite

• vite是一种新型前端构建工具，Vite 底层使用了两个构建引擎：Esbuild和Rollup，在开发环境使用Esbuild进行快速构建，在生产环节使用rollup。vite。
• Vite 利用Esbuild Bundler 的功能进行依赖预构建，用其 Transformer 的能力进行 TS 和 JSX 文件的转译，也用到它的压缩能力进行 JS 和 CSS 代码的压缩。
• 在 Vite 当中，无论是插件机制、还是底层的打包手段，都基于 Rollup 来实现，可以说 Vite 是对于 Rollup 一种场景化的深度扩展，将 Rollup 从传统的 JS 库打包场景扩展至完整 Web 应用打包
• 优势：
  • 快速的冷启动：vite在开发环境启动开发服务器是直接启动的，而不需要想webpack一样去分析依赖
  • 快速的预构建：在开发阶段的依赖预构建阶段，Esbuild为Vite提供Bundle 打包工具，完成第三方依赖的预构建
  • 快速的HMR：利用ES模块的特性，根据请求按需编译，而不是像webpack一样更新整个依赖树
  • 快速的文件构建和压缩：使用esbuild替换babel、tsc的进行代码转换工作，更快的完成转换；使用esbuild替换Terser 这种js压缩器，更快的完成压缩
  • 基于rollup的代码拆分、预加载等生产环境编译，打包产物体相对webpack更小更“干净”
• 不足：
  • 对于旧浏览器支持较差，由于 Vite 采用了 ES 模块化和原生浏览器 APIs，因此在旧版本的浏览器中可能会出现兼容性问题。
  • 社区支持和生态系统仍处于相对早期的阶段