前端构建工具 Mako 开源了

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


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 查看群二维码)


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


https://makojs.dev/rss.xml


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


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


致谢


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


  • 曾给 Mako 提交过代码的禾登、杰司、灏辰、伊北、棋怪、常夜、桂阳、卫初、桃树、油油、辰酉
  • 当下仍积极参与 Mako 开发的辟起、辟殊、无玄、谦男、枭晓、云谦
  • 社区前期使用 Mako 并提供建议的小虎、小平淡
  • 项目发起人偏右
  • Logo 设计师短篇
  • 非常有格调的 Landing 页的 PD、设计师和开发,山间、亿元、杜杰


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


  • webpack, which inspired lots of ideas of Mako.
  • swc by @kdy1, which powered the parsing, transforming and codegen of Mako.
  • farm by @brightwu, which inspired the tree shaking, plugin system and others of Mako.
  • rspack, which inspired the tree shaking of Mako.
  • oxc-resolver by @Boshen which powered the resolver of Mako.
相关文章
|
1月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
3天前
|
监控 前端开发 JavaScript
前端稳定性工具-Sentry
【11月更文挑战第9天】Sentry 是一个开源的错误和性能监控平台,支持多种编程语言和框架。它能够捕获前端应用中的各种错误和性能问题,提供详细的错误信息和用户行为关联,帮助开发团队快速定位和解决问题,优化应用性能。但需注意隐私保护、数据准确性和成本控制。
|
10天前
|
前端开发 JavaScript API
前端开发的秘密武器:这些工具让你轻松应对各种复杂动画效果!
【10月更文挑战第30天】前端开发中,动画效果为页面增添了无限生机。CSS3的@keyframes规则和JavaScript动画库如GSAP、Anime.js等,使开发者能轻松实现从简单到复杂的动画效果。掌握动画原理和设计原则,结合工具和库,可以创造出既美观又实用的动画,提升用户体验。
29 4
|
9天前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
20 2
|
27天前
|
自然语言处理 前端开发 JavaScript
推荐 10 个前端开发会用到的工具网站
本文介绍了多个前端开发工具,包括 Web Design Museum、Landing Page、Google Fonts、Lorem Ipsum、Animista、Blobmaker、Spline、CodeToGo、UnusedCSS 和 Responsively,帮助开发者提高效率和项目质量。这些工具涵盖了设计、动画、代码片段管理、响应式测试等多个方面。
62 0
推荐 10 个前端开发会用到的工具网站
|
1月前
|
Web App开发 前端开发 开发工具
2024前端开发工具推荐
本文推荐了2024年最受前端开发者欢迎的十款工具,包括Visual Studio Code、Dreamweaver、Sublime Text、WebStorm、Atom、HBuilder、Chrome Developer Tools、Figma、Postman和Git。这些工具覆盖了代码编辑、调试、版本控制及API开发等多个方面,旨在帮助开发者提高效率和代码质量,让开发工作更高效、更愉快。
|
27天前
|
存储 前端开发 JavaScript
前端模块化打包工具的深度解析
【10月更文挑战第13天】前端模块化打包工具的深度解析
|
1月前
|
存储 前端开发 JavaScript
前端开发中的状态管理概述与工具选择
【10月更文挑战第7天】前端开发中的状态管理概述与工具选择
15 0
|
2月前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
80 13
|
28天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
118 2