Mako 开源了

2024-06-28 by sorrycc

English Version: Mako is Now Open Source.

Hi，我是 sorrycc，Mako 的主要负责人之一，也是 Umi、Dva、Father 等库的作者。很开心，Mako 终于开源了，Github 地址是 https://github.com/umijs/mako/ ，今天和大家正式介绍下他。

Mako 是什么？

Mako 是「极快」和「生产级」的前端构建工具，基于 Rust。

「极快」是我们立项做 Mako 的初衷，没有构建速度问题也就没有 Mako，参考下方的 Benchmark 区域部分数据，同时我们也一直在探索更快的构建速度方案；而「生产级」是因为 Mako 自 2023.11.24 起已在蚂蚁内部正式发布，通过工程化的方式验证了数千个项目和所有用到的 npm 包及其不同版本，已落地数百个项目，并对内服务了中后台、小程序、H5 移动端、低代码、营销、组件库、组件打包、Serverless Function 等多个不同平台和业务场景，已具备了生产级的能力。

大家可以访问 https://makojs.dev/docs/features 了解 Mako 的更多特性。

Mako 怎么来的？

去年（2023.3）我们团队立了 3 个项，Rust、SSR 和 AIGC，我们领了 Rust 方向，解构建性能的问题。我们团队一直在探索更快的构建速度方案，包括之前发布的 MFSU，都是在 Webpack 里对构建速度进行优化，这有一定的局限性。我们希望通过 Rust 来寻求这个问题的彻底解。

大家可能会好奇，为啥我们不用现有 Rust 工具而是自己做一个？原因是复杂的，比如以下几点。1）当时社区库的成熟度和和蚂蚁的需求匹配度，我们在动手前调研了所有社区的 Rust 构建方案，但最终选择自研，2）主动权，业务原因，构建工具在蚂蚁会有大量定制需求，事实也是如此，我们在内部发布后，发现拿着构建这个锤子找到了很多与之匹配的钉子，3）现代的元框架是编译时框架，除了构建之外，还有大量编译需求，尤其是 SSR & RSC 的场景，比如在我们内部，RSC 场景需要 4 次构建，4）学 Rust 的需求和团队成长需求等，现代前端工具都是 Rust 编写，我们不进则退。

上图是 Mako 的时间线。Mako 于 2023.3 Kickoff，2023.7 有了第一个可用版本，2023.11 在蚂蚁内部发布，2024.6 开源。我们初始由 3 个 0 Rust 基础的同学组织，团队成员尤其是虚拟团队同学来来走走，边学 Rust 边啃构建领域知识边做 Mako 还是很刺激的，所幸我们还是做出来了，在这个过程中也学到了很多。在此感谢构建领域的前辈 Webpack、Farm 和 Rspack 等，以及 ChatGPT。

速度

Mako 在速度上花了不少功夫，下方是 Benchmark 数据。

Benchmark 跑的项目是大家都在跑的 Turbopack 的测试项目，跑在 Mac Book Pro M2 Max 电脑上。包含维度有 dev 冷启动时间、根节点和叶子节点的 HMR 时间、生产 Build 构建时间和 JS 产物尺寸。（注：Farm 使用 API 的方式没有尝试成功，所以没有生成 HMR 数据；RsBuild 升级 0.7 遇到点问题，所以目前还是 0.6，RsBuild 的 0.7 应该会更快一些。）

如果大家感兴趣，不妨自己手动 clone 仓库跑跑看。

$ git clone git@github.com:umijs/benchmark.git
$ cd benchmark
$ pnpm i
$ pnpm run setup
$ pnpm benchmark

以下是我们和之前自己的对比。

Ant Design Pro 全量项目的构建，Webpack 用时 16s，Mako 用时 3.9s，提速 4 倍。

Ant Design Pro 全量项目的构建，Mako 基本都是实时热更。

内网 Hybrid 框架 Smallfish 的项目构建，基于 RSC（React Server Components），脚手架项目，构建时间从 36.7s 减少到 1.2s。看起来有点夸张，但这是真实的数据。

以上是更多这类 RSC 项目的提速效果。

此外，Mako 还有个试验性的 SSU 功能，类似之前的 MFSU 实现，会做依赖的打包和缓存。根据源码和依赖比的不同，可实现 Dev 热启动的 10-50 倍提速。目前暂时通过 SSU=true 环境变量开启。

如何参与？

如果你想体验 Mako，可通过脚手架一键创建 Mako + React 的项目。

$ npm create mako

如果你是 Umi 用户，体验 Mako 非常简单！

# 确认版本是 4.2.0 或以上
$ npx umi -v
4.2.0
# 开启 Mako 配置
$ npx umi config set mako {}
# 执行构建或其他命令
$ npx umi build

如果你想交流关于 Mako 的问题或建议，可以扫码加我们的微信群。（过期或群满了请到 https://makojs.dev/docs/feedback 查看新的二维码）

或者点击以下链接加入 Telegram 群。

https://t.me/+EN3fycCw3TI1NDA1

同时，也欢迎大家通过 RSS 的方式订阅 Mako 的动态，我们会在这里发布 Mako 的最新消息以及和构建相关的高质量技术文章。

https://makojs.dev/rss.xml

如果你希望参与到 Mako 的开源，可访问 https://github.com/umijs/mako 和 CONTRIBUTING 文档了解更多。所有提交过 Bugfix 或 Feature PR 的同学，都可以选择加入到 Mako 的开发者钉钉群里。

如果你计划在你的公司深度推广和应用 Mako，或者基于 Mako 做二次开发，可以联系我们（sorrycc#gmail.com）沟通，我们可以提供相应的培训、咨询和更及时的支持服务。

直播答疑

今天（2024.6.28）晚 9 点，我们会在 B 站开个直播答疑，预约地址见 https://t.bilibili.com/947260122376175622 ，欢迎大家来参与，可以问关于 Mako 的任何问题。大家有关于 Mako 的问题可以预先填下问卷 https://docs.qq.com/form/page/DY2Z6VndTRXBpR1Nh 。

致谢

Mako 的发布离不开每一位贡献者，尤其大部分同学还是虚线业余时间参与的，感谢！

以及很多社区的依赖库作者！

在 GitHub 上编辑此页