2022，前端工具链十年盘点

大家好&＃xff0c;我是若川。持续组织了6个月源码共读活动&＃xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&＃xff0c;每周大家一起学习200行左右的源码&＃xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列

2021 的年度盘点我们选择了一个特别的形式&＃xff0c;把时间范围拉长到 10 年&＃xff0c;梳理前端工具链里的 12 个重要的包的发布和版本更新时间&＃xff0c;结合 npm 下载数据&＃xff0c;看看前端的工具链在这十年间有怎样的演变。

查看本图的全部细节&＃xff0c;请访问&＃xff1a;https://time.graphics/line/598790

前史&＃xff1a;2009 - 2010

2009 年前&＃xff0c;前端的工具链不由 Javascript 编写&＃xff0c;功能也较为简单&＃xff0c;如 make、python、C# 等。2009 年起&＃xff0c;前端工具链的前置要求被逐个满足。

• 模块定义&＃xff1a;2009 年&＃xff0c;CommonJS 模块定义规范被提出&＃xff1b;

• 语言&＃xff1a;2009 年&＃xff0c;ECMAScript 5 发布&＃xff0c;Javascript 标准更明确&＃xff0c;功能更多&＃xff1b;

• 执行环境&＃xff1a;2009 年&＃xff0c;Node.js 发布初始版本&＃xff1b;

• 包管理&＃xff1a;2010 年&＃xff0c;npm 发布&＃xff1b;

第一章&＃xff1a;寻找抽象&＃xff0c;2011 - 2015

2011 年起&＃xff0c;时机成熟&＃xff0c;前端工具链开始大量冒出。这个阶段的主流工具链均在尝试各种抽象&＃xff0c;以合理表达前端的自动化处理流程&＃xff1a;

• 任务&＃xff1a;2012 年 Grunt 发布首版¹²&＃xff0c;将处理过程定义为多个不同的任务&＃xff0c;每个任务执行一个函数或插件&＃xff1b;

• 文件流&＃xff1a;2013 年 Gulp 发布首版&＃xff0c;并快速在同年发布到了 3.0 正式版&＃xff0c;在 Grunt 抽象任务的基础上&＃xff0c;Gulp 引入了流编程的概念&＃xff0c;避免在执行复杂任务时&＃xff0c;需要将编译中间结果放在临时文件夹的场景&＃xff1b;

• 模块依赖&＃xff1a;2012 年 Webpack 发布首版&＃xff0c;并于 2014 年发布 1.0 正式版&＃xff0c;它通过分析模块间依赖来决定编译过程&＃xff0c;将可扩展点抽象为 loader 和 plugin。

对于不同的子场景&＃xff0c;也有其他工具&＃xff1a;

• Node.js 支持&＃xff1a;2011 年&＃xff0c;browserify 发布首版&＃xff0c;允许在前端仓库引入 Node.js 的部分 API&＃xff0c;并实现跟其他库类似的打包步骤&＃xff1b;

• 国内前端开发&＃xff1a;2013 年&＃xff0c;百度开源了 FIS&＃xff0c;针对国内前端的更常见需求进行了支持&＃xff0c;包括 GBK 特性支持&＃xff1b;

• 转译&＃xff1a;2014 年&＃xff0c;Babel 发布首版³&＃xff0c;重心放在对 Javascript 转译&＃xff0c;使得尚在提案阶段的语言特性能兼容。

注 1&＃xff1a;部分包在发版 npm 前&＃xff0c;会通过官网直接分发&＃xff0c;本文所有包发版时间以 npm 为准&＃xff0c;不统计其他渠道&＃xff0c;下略。

注 2&＃xff1a;“首版”即 npm 包首次发版时间&＃xff0c;它可能小于 1.0.0&＃xff0c;下略。

注 3&＃xff1a;Babel 首版叫做 6to5&＃xff0c;后改名为 Babel。

第二章&＃xff1a;打包一切&＃xff0c;2016 - 2019

2016 年&＃xff0c;Webpack 的 npm 年下载量和 Gulp、Grunt 达到同一个数量级&＃xff0c;意味着 Webpack 统治前端工具链的时代来临。

工具链中&＃xff0c;存在如下的三类发展轴向&＃xff1a;

• 高封装性&＃xff1a;即配置内容简单&＃xff0c;不需要写太多配置即可完成前端流程配置&＃xff1b;

• 低复杂度&＃xff1a;即工具的内部实现简单&＃xff0c;文档友好度、插件书写复杂度均受此特性影响&＃xff1b;

• 强能力&＃xff1a;即支持的功能集更多。

对比出现的这些工具库&＃xff0c;很难做到同时拥有三个特性&＃xff0c;如 Webpack 复杂度较高&＃xff0c;Grunt 能力较弱&＃xff0c;Gulp 封装性较低。

Webpack 最终能统治社区&＃xff0c;离不开它的三个王牌能力&＃xff1a;一切皆可打包、本地模块热加载&＃xff08;HMR&＃xff09;和按需加载。而 Webpack 的弱项是其配置的繁琐和复杂&＃xff0c;在这个阶段出现的大部分新包&＃xff0c;也是在牺牲了部分能力的前提下&＃xff0c;去强化封装性和简化复杂度&＃xff1a;

• 2013 年⁴&＃xff0c;Parcel 发布首版&＃xff0c;并在 2018 年发布 1.0 正式版&＃xff0c;在当时它主打无配置启动项目&＃xff1b;

• 2015 年&＃xff0c;Rollup 发布首版&＃xff0c;并在 2019 年发布 1.0 正式版&＃xff0c;它主打工具库的打包&＃xff0c;相比 Webpack 配置更简单和轻量&＃xff1b;

• 面临其他工具库的挑战&＃xff0c;Webpack 也在 2018 年发布 4.0 版&＃xff0c;支持了无配置启动项目。

注 4&＃xff1a;从 npm 记录而言&＃xff0c;Parcel 首版发布于 2013 年&＃xff0c;但是它大规模进入公共视野是在 2017 年。

第三章&＃xff1a;性能优化&＃xff0c;2020 至今

2020 年开始&＃xff0c;我们观察到工具链开始将重心放在了性能优化上&＃xff1a;

• 2020 年&＃xff0c;Webpack 5.0 发布&＃xff0c;实现了多进程编译以优化计算密集型任务&＃xff0c;并强化了缓存机制&＃xff1b;

• 2020 年&＃xff0c;Snowpack 发布首版正式版&＃xff0c;主打不打包项目依赖的模块&＃xff08;Bundleless&＃xff09;&＃xff0c;而是直接依赖 CDN 提供的模块文件&＃xff0c;大大提升了本地环境运行速度&＃xff1b;

• 2020 年&＃xff0c;Vite 发布首版&＃xff0c;同样主打 Bundleless。

那么&＃xff0c;这些性能优化是不是到了理论极限呢&＃xff1f;我们可以从工具链里不同的任务类型分述&＃xff1a;

• CPU 密集型&＃xff0c;如压缩、转译等环节&＃xff0c;可能的优化有&＃xff1a;

  • 使用更高效算法&＃xff1a;优化空间小&＃xff1b;

  • 压榨 V8 性能&＃xff1a;如参考 Crankshaft Bailout 或 TurboFan Bailout&＃xff1b;

  • 多核并行计算&＃xff1a;受到进程通信开销制约&＃xff1b;

  • 使用其他语言实现⁵&＃xff1a;受到跨语言通信制约&＃xff1b;

• I/O 密集型&＃xff0c;包括&＃xff1a;

  • 文件读写&＃xff1a;利用 bundleless 减少本地文件读取量&＃xff1b;此外 Node.js 默认异步 API 使得此类任务能足够快&＃xff0c;优化空间小&＃xff1b;

  • 进程通信&＃xff1a;序列化/反序列化开销较大&＃xff0c;共享内存的 worker_threads 尚不稳定⁶&＃xff0c;此外线程启动有损耗&＃xff1b;

  • 跨语言通信&＃xff1a;2018 年&＃xff0c;napi-rs 1.0 发布&＃xff0c;Node.js 调用 rust 有了更高效简单的方式⁷&＃xff1b;

• GPU 密集型&＃xff0c;前端场景较少⁸&＃xff0c;包括&＃xff1a;

  • 机器学习&＃xff1a;如使用 NVIDIA RAPIDS API 的 node-rapids&＃xff1b;

  • 图像处理&＃xff1a;如 GPU.js。

社区找到的突破口在 CPU 密集型任务上&＃xff0c;使用 Go 或者 Rust 书写计算密集型的部分任务&＃xff1a;

• 2019 年&＃xff0c;基于 Rust 实现的 SWC 发布首版&＃xff0c;对标 Babel&＃xff0c;显著提升了性能&＃xff1b;

• 2020 年&＃xff0c;使用 go 实现的 esbuild 发布首版&＃xff0c;相比 SWC 更聚焦于 TypeScript 和 Javascript 的转译&＃xff0c;性能更快&＃xff1b;

• 2020 年&＃xff0c;Vite 发布 2.0&＃xff0c;使用 esbuild 实现了性能二次提升&＃xff1b;

• 2020 年&＃xff0c;Parcel 发布 2.0&＃xff0c;基于 napi-rs 和 Rust 重新实现&＃xff1b;

• 2020 年&＃xff0c;rome 发布首版&＃xff0c;在 2021 年也转为基于 Rust 开发。

最后&＃xff0c;我们看看 2021 年的 npm 包年下载量数据&＃xff1a;

• Babel 14 亿&＃xff0c;稳坐榜首&＃xff1b;

• Webpack 8亿&＃xff0c;位列其次&＃xff1b;

• 新兴的高性能打包降序依次是&＃xff1a;esbuild 4800万、Vite 860万、Parcel 340万、SWC 280万、Snowpack 170万&＃xff1b;

• 老牌的打包工具降序依次是&＃xff1a;Rollup 2亿、Gulp 720万、Grunt 350万。

时局如何变迁&＃xff0c;让我们拭目以待。

注 5&＃xff1a;Javascript 的特性为 JIT、弱类型、动态类型&＃xff0c;其执行效率相对其他 AOT、强类型、静态类型的语言更低。

注 6&＃xff1a;Node 12 起正式支持 worker_threads&＃xff0c;但稳定性一直不高&＃xff0c;如触发 Access Violation。

注 7&＃xff1a;对于 Rust&＃xff0c;一开始有 neon 提供 js binding&＃xff0c;但性能还不够快。

注 8&＃xff1a;因为 Node.js 标准包里不包含对 GPU 的封装。另外&＃xff0c;浏览器缺乏直接利用 GPU 的 API&＃xff0c;直到 WebGPU 出现。

正文未提及信源&＃xff1a;

• CommonJS 溯源&＃xff1a;https://arstechnica.com/information-technology/2009/12/commonjs-effort-sets-Javascript-on-path-for-world-domination/

• Javascript 二十年&＃xff1a;https://github.com/doodlewind/jshistory-cn

• npm 包发版时间&＃xff1a;https://libraries.io/

• npm 包下载数据&＃xff1a;https://npm-stat.com/charts.html

阿里妈妈前端快爆从 2017 年开始&＃xff0c;已坚持更新到 2022 年。过去 5 年间&＃xff0c;我们致力于传达前端业界的更迭&＃xff0c;也慢慢分化出来了重客观信息的新闻版块、重知识聚合的专题板块、重碎片化分享的百宝箱板块。

感谢全体编辑部成员过去一年的贡献&＃xff1a;一丝、墨尘、承虎、池冰。
感谢各位对本文的纠错和支持&＃xff1a;尤雨溪、doodlewind、工业聚、太狼、游真、E0、天猪、徐振东。

················· 若川简介 ·················

你好&＃xff0c;我是若川&＃xff0c;毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇&＃xff0c;在知乎、掘金收获超百万阅读。
从2014年起&＃xff0c;每年都会写一篇年度总结&＃xff0c;已经写了7篇&＃xff0c;点击查看年度总结。
同时&＃xff0c;最近组织了源码共读活动&＃xff0c;帮助3000&＃43;前端人学会看源码。公众号愿景&＃xff1a;帮助5年内前端人走向前列。

识别上方二维码加我微信、拉你进源码共读群

今日话题

略。分享、收藏、点赞、在看我的文章就是对我最大的支持~