详细介绍 webpack、rollup、vite 和 esbuild 的优缺点

关于前端构建工具，本人既往项目中webpack用的比较多，对其他的只知道有这么个工具，并不是很了解。

因既往项目大多采用Vue2 + webpack4，而随着项目越来越笨重，构建打包的速度就慢了起来，想着以后新项目中，能升级或换一个，所以想对现在比较流行的前端构建打包工具做一个全面了解。

前端构建工具概述

构建工具是将本地源文件按照一定的逻辑规范，编译打包成浏览器识别的文件的一种前端工具。

从目前市场上流行的构建工具来看，其常见功能有：

• 代码转换，例如将 ts 文件转换为 js 文件。

• 代码兼容，例如es6、css的兼容处理。

• 代码压缩，文件压缩、gzip 压缩等。

• 代码分割，将大体积文件进行分割。

• 热更新，修改代码后自动刷新页面。

• 代码检验，检查代码格式是否符合规范。

• tree-shaking：打包过程中自动剔除没有使用的代码

• 代码打包，将有关联的代码打包在一起。

  ......

通过构建工具的使用，能大大地提升我们的开发效率。

常见构建工具

webpack

webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。

1、优势

• 支持 CommonJS、AMD、ESM 等多种模块化规范，可以将各种资源文件视为模块进行处理和打包，并自动识别依赖关系。
• 拥有强大的插件系统，可实现对代码压缩、分包chunk、模块热更新等。
• Webpack 提供了各种插件和加载器处理各种资源文件，并支持自定义配置文件，使得开发者可以通过简单的配置调整编译过程和输出结果，实现高度可配置的构建流程。
• 有着庞大的生态系统，涵盖了众多的插件、加载器和工具，可以方便地扩展和定制。

2、劣势

• 构建速度较慢：由于 Webpack 需要将各种资源文件合并、处理和输出，因此在打包大型项目时，构建速度可能会较慢。
• 体积较大：由于 Webpack 需要将所有代码转换为模块，并引入一些必要的运行时依赖，因此输出的文件往往较大，可能会影响应用的加载速度。
• 配置复杂：尽管 Webpack 提供了很多的功能和自定义选项，但是其配置文件往往较为复杂，需要考虑到多个方面，如入口、输出、模块、插件等。

rollup

rollup是一款 ES Modules 打包器，相比于Webpack，Rollup要小巧的多，打包生成的文件更小。

1、优势

• 打包的产物比较干净，体积小，没有webpack那么多工具函数。
• 插件机制设计得相对更干净简洁，单个模块的 resolve / load / transform 跟打包环节完全解耦。
• rollup原生支持tree-shaking

2、劣势

• 对js以外的模块的支持上不如webpack，加载其他类型的资源文件或者支持导入 CommonJS 模块等，需要使用插件去完成。
• rollup不支持HMR（热更新），使开发效率降低。
• rollup并不适合开发应用使用，因为需要使用第三方模块，而目前第三方模块大多数使用CommonJs方式导出成员。

vite

vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生ES模块提供了丰富的内建功能，如速度很快的模块热更新HMR。 一套构建指令，它使用rollup打包代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。

1、优势

• 快速的冷启动：vite会直接启动开发服务器，不需要进行打包操作，所以不需要分析模块的依赖、不需要编译，因此启动速度非常快。
• 即时的热更新：在热模块HMR方面，当修改一个模块的时候，仅需让浏览器重新请求该模块即可，无须像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
• 真正的按需编译：利用现代浏览器支持ES Module的特性，当浏览器请求某个模块的时候，再根据需要对模块的内容进行编译，这种方式大大缩短了编译时间
• 更小的打包体积，vite在生产环境通过rollup进行打包，打包产物体积小。
• 更加的简单易用，相对于 Webpack 来说，Vite 的配置更加简单明了，许多默认配置已经足够满足大多数前端项目的需求。

2、劣势

• 对于旧浏览器支持较差，由于 Vite 采用了 ES 模块化和原生浏览器 APIs，因此在旧版本的浏览器中可能会出现兼容性问题。
• 社区支持和生态系统仍处于相对早期的阶段，与类似 Webpack 这样的前端构建工具相比，它的生态系统还不是很完善，社区还比较小。

esbuild

esbuild是一个非常新的模块打包工具，拥有着超高的性能。

1、优势

• 编译速度非常快，相比其他流行的 JavaScript 编译器和打包器，esbuild基于Go语言编写，在编译阶段就已经将源码转译为机器码，所以速度最多可以快 100 倍。
• esbuild 支持多种模块格式，包括 CommonJS、ES6 模块、AMD 等，使得它适用于任何类型的 JavaScript 项目。
• esbuild 的配置非常简单，只需要提供一个入口文件和输出目录即可。

1、劣势

• 支持不完善，提供的功能很基础，对代码分割和css处理等支持较弱。
• 配置灵活的不高，侧重于快速且轻量级的构建，没有提供一些复杂的插件或高级配置选项。
• 没有稳定版本，不适合直接用到生产环境，

总结

• rollup更适合打包库。
• webpack更适合打包项目应用。
• vite基于rollup实现了热更新也适合打包项目。
• esbuild更适合作为底层的模块构建工具。