webpack、rollup、vite、esbuild、parcel优劣势详解

前端构建工具概述

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

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

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

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

3. 代码压缩，文件压缩、gzip 压缩等。

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

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

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

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

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

......

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

常见构建工具：

• 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处理等支持较弱。 配置灵活的不高，侧重于快速且轻量级的构建，没有提供一些复杂的插件或高级配置选项。 没有稳定版本，不适合直接用到生产环境，

• parcel

parcel是新一代前端打包工具，

1、优势

零配置设置: Parcel 最大的特点可能就是零配置设置。Webpack 和 Rollup 通常需要复杂的配置文件才能启动，而 Parcel 则不同，它会自动检测和配置大多数项目设置。这使它对初学者来说非常容易上手，让开发人员无需花时间配置就能快速上手并运行。 最适合初学者的打包工具: Parcel 的 “零配置” 方法对刚进入生态系统的开发人员尤为有利，可减少与复杂配置相关的学习曲线。 内置资产处理: Parcel 内置支持各种资产类型，包括图片、CSS、HTML 等。您无需为常见的资产类型设置加载器或插件，从而简化了开发流程，减少了对额外配置的需求。 自动解决依赖性问题: Parcel 可自动分析项目的依赖关系，并根据需要将其打包。这一功能消除了在配置文件中手动指定入口点和依赖关系的需要，使开发和代码维护更加简单明了。 快速构建时间: Parcel 利用多核处理技术在所有内核之间并行处理工作，充分利用了现代硬件的优势，从而加快了构建时间，提高了开发人员在开发周期中的工作效率。 代码分割变得简单: Parcel 通过其神奇的导入策略自动进行代码拆分，无需明确干预即可提高性能。 热模块替换: Parcel 的开发服务器集成了开箱即用的热模块替换功能，无需手动重新加载即可实现实时更新。 多语言支持: Parcel 开箱即支持多种语言，包括 JavaScript、TypeScript 等。 注重开发人员体验: Parcel 优先考虑流畅和开发人员友好的体验。它的零配置方法和开箱即用的功能迎合了开发人员的需求，他们希望专注于编写代码，而不是管理构建工具配置。

2、劣势 配置灵活性有限: 虽然 Parcel 的零配置方法对很多人来说都很有利，但对于有特殊要求的项目来说，它可能会限制定制的可能性。 插件生态系统: Parcel 的插件生态系统虽然在不断发展壮大，但其广度和多样性可能不及更成熟的打包程序。 支持: Parcel 是一个较新的打包程序，因此它可能无法获得与 Webpack 等更成熟的打包程序相同水平的支持。

总结 rollup更适合打包库。 webpack更适合打包企业级项目。 vite基于rollup实现了热更新也适合打包项目。 esbuild更适合作为底层的模块构建工具。 parcel更适合前端小型到中型规模项目的快速实践