前端打包构建工具整理:功能与区别


前言

据我了解,前端开发构建工具目前有两大类: bundle和no bundle, 其中,
bundle类工具主要代表: webpack, parcel, rollup, esbuild.
no bundle类主要代表: snowpack, vite.

在过去的几年,webpack之类的bundle打包工具,成为大多数web应用程序构建的必要步骤。这是因为:

  1. 在HTTP 1.x时代, 浏览器客户端在同一时间,针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞,从而影响性能,因此合并请求非常有必要;
  2. 在以前的浏览器中, nodejs的CommonJS模块和ES模块,普遍都无法直接运行,必须转换处理,这也为bundler的存在提供了合理性。
  3. bundle处理本身也有很多优点,比如webpack支持很多插件,可以支持各种文件处理以及混淆压缩等。

但是bundler的存在,却真实的增加了前端应用开发很多的复杂性,也一定程度影响开发效率, 比如bundle体积过大,热更新速度慢等。而且到了2020后的现代,以上的问题基本上都不复存在:

  1. http2多路复用,允许同时通过单一的http2连接发起多重的请求-响应消息。随着http2的普及,合并请求变得没那么必要。
  2. 浏览器普遍开始支持ESM模块。

no bundle构建工具普遍的一个特点就是配置相对简单, 启动和热更新快, 开发体验较好, 这样自然而然开始流行起来。比如vue 2.0用webpack, 到vue 3.0就抛弃webpack改用自研的vite工具了。

当然no bundle也不是真的no bundle, 毕竟bundle还是有很多优势的,在构建发布时也依然用到bundle工具, 如snowpack可以选择bundler如webpack,vite使用了rollup.

内容

webpack

官方描述: 本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。

rollup

官方描述: Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。
Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中,而不是以前的特殊解决方案,如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数,而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现,但当前 Rollup 可以使你提前体验。

esbuild

官方描述: An extremely fast JavaScript bundler.

snowpack

官方描述: Snowpack 是为现代浏览器设计的一个超级快的前端构建工具, 它是你在开发工作流程中使用更笨重更复杂的bundle打包工具如webpack, parcel的另一个可选方案。Snowpack利用JavaScript的本地模块系统(即ESM)来避免不必要的(转换)工作, 并在你无论你工程增长多大时保持运行快速。

vite

官方描述: Vite 是一种新型前端构建工具,能够显著提升前端开发体验。
(vite vue 3.0引入, 使用了esbuild + rollup, 集合两家之长)

小结

webpack升级到5.x,依然是强大的主流选择,但是不再是一统天下了。
esbuild 和 rollup 都是小巧玲珑,主打先进和快,仅用于javascript。
vite 未来主要依然是用于vue 3.0的生态中。
snowpack 朝大而全发展,支持react, vue, svelte等。