前端构建工具 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月前
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
929 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
108 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
|
2月前
|
前端开发 JavaScript 开发者
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
162 4
|
3月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
89 8
|
3月前
|
前端开发 JavaScript 开发者
超实用开源前端商城模板,助力电商项目飞速启航!免费直接可用!
分享一款精心设计的开源前端商城模板,涵盖商品展示、购物车、订单处理、用户登录注册等核心功能,使用HTML、CSS、JS和jQuery构建,结构清晰,适合新手和资深开发者,助力电商项目快速启动。
192 0
超实用开源前端商城模板,助力电商项目飞速启航!免费直接可用!
|
3月前
|
监控 前端开发 JavaScript
前端稳定性工具-Sentry
【11月更文挑战第9天】Sentry 是一个开源的错误和性能监控平台,支持多种编程语言和框架。它能够捕获前端应用中的各种错误和性能问题,提供详细的错误信息和用户行为关联,帮助开发团队快速定位和解决问题,优化应用性能。但需注意隐私保护、数据准确性和成本控制。
228 3
|
3月前
|
前端开发 JavaScript API
前端开发的秘密武器:这些工具让你轻松应对各种复杂动画效果!
【10月更文挑战第30天】前端开发中,动画效果为页面增添了无限生机。CSS3的@keyframes规则和JavaScript动画库如GSAP、Anime.js等,使开发者能轻松实现从简单到复杂的动画效果。掌握动画原理和设计原则,结合工具和库,可以创造出既美观又实用的动画,提升用户体验。
81 4
|
3月前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
59 2
|
4月前
|
自然语言处理 前端开发 JavaScript
推荐 10 个前端开发会用到的工具网站
本文介绍了多个前端开发工具,包括 Web Design Museum、Landing Page、Google Fonts、Lorem Ipsum、Animista、Blobmaker、Spline、CodeToGo、UnusedCSS 和 Responsively,帮助开发者提高效率和项目质量。这些工具涵盖了设计、动画、代码片段管理、响应式测试等多个方面。
255 0
推荐 10 个前端开发会用到的工具网站

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75