image.png

[p3]前端打包工具 - 图2

几种打包工具的对比

grunt

Grunt 是一套前端自动化工具，帮助处理反复重复的任务。一般用于：编译，压缩，合并文件，简单语法检查等

gulp

技术栈： jQuery+Bootstrap+Gulp

基于“流”的自动化构建工具，采用代码优于配置的策略

webpack

技术栈： Webpack+Vue生态

是模块化管理工具和打包工具。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片等。

从生态上来讲，webpack 的用户最多，支撑了众多的大型前端项目，其实践验证更完备，插件也最为丰富。

出现的契机： 为了解决低版本浏览器不支持 ESM 模块化的问题，将各个分散的 JavaScript 模块合并成一个文件，同时将多个 JavaScript 脚本文件合并成一个文件，减少 HTTP 请求的数量，有助于提升页面首次访问的速度。后期 Webpack 乘胜追击，引入了 Loader、Plugin 机制，提供了各种构建相关的能力（babel转义、css合并、代码压缩），取代了同期的 Browserify、Gulp。

缺点：

  1. 配置文件复杂
  2. 依赖变大后， 需要巨大依赖图谱，并根据依赖关系进行各种合并、拆分计算， 打包时间长

Rollup

最大的亮点是利用 ES6 模块设计，利用 tree-shaking生成更简洁、更简单的代码。

Rollup 瞄准的市场更小，专注于交付库，而非大型工程。Rollup 在交付场景下的打包更具备优势，支持多种模块类型输出，比如 commonjs、es module 等等

场景：对于应用使用 Webpack，对于类库使用 Rollup；需要代码拆分(Code Splitting)，或者很多静态资源需要处理，再或者构建的项目需要引入很多 CommonJS 模块的依赖时，使用 webpack。

esbuild(快)

esBuild 将自身定位于打包及压缩工具，其特点是性能足够强。

快的原因： 它的核心代码由 Go 语言编写，然后编译为 Native 代码。然后 npm 安装时动态去下对应平台的二进制包，支持 mac、linux 和 windows。

  • It’s written in Go and compiles to native code.
  • Parallelism is used heavily.
  • Everything in esbuild is written from scratch.
  • Memory is used efficiently.

https://esbuild.github.io/faq/#why-is-esbuild-fast

相比传统 JavaScript 构建工具有 10 到 100 倍性能优势。由 esbuild 独立完成的构建项目并不多，处于将火不火的边缘，但是已经有不少大型项目开始实践，将 webpack 与 esbuild 相结合使用，解决打包时的性能问题。

ESM

全称 ECMAScript modules，基本主流的浏览器版本都以已经支持。

  1. <script type="module" crossorigin src="/assets/index.185fd103.js"></script>

为什么webpack后出现新的工具？
HTTP/2 的盛行，HTTP/3 也即将发行，再加上 5G 网络的商用，减少 HTTP 请求数量起到的作用已经微乎其微，而且新版的浏览器基本已经支持了 ESM

snowpack

增量构建基本就是改动一个文件就处理这个文件即可，模块之间算是“松散”的耦合

vite

vite+vue3

参考：
https://segmentfault.com/a/1190000025137845