前端构建工具 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.
相关文章
|
6月前
|
运维 前端开发 JavaScript
前端埋点校验工具:数据驱动的最后一道防线
数据埋点是企业决策的关键基础,但常面临覆盖率低、数据不准和故障难排查三大难题。本文深入剖析了这些问题的成因与影响,并提出“三维校验矩阵”解决方案:提升覆盖率至99.8%、降低错误率至0.3%、提速故障定位5倍。同时对比Split.io、Tealium、Sentry、板栗看板等工具优劣,为企业选型提供参考。迈向高质量数据治理,从精准埋点开始。
|
6月前
|
JSON 前端开发 JavaScript
惊艳!阿里开源 15.2k Star 企业级低代码引擎揭秘,如何变革前端开发方式?
阿里巴巴开源的 LowCodeEngine 是一款企业级低代码引擎,具备可视化编排、UI 渲染、代码生成等全链路能力。支持 React、Vue、Rax 等框架,提供高扩展性与类型安全,助力高效开发,降低维护成本,适用于后台系统、多端同步等场景。
1106 1
|
5月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
1137 0
|
9月前
|
人工智能 自然语言处理 前端开发
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
1726 93
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
|
6月前
|
Web App开发 前端开发 关系型数据库
GitHub 2.8k star 开源既封神,“Liquid‑Glass‑React”,让你前端界面瞬间拥有苹果级液态玻璃效果!
Liquid-Glass-React 是一款开源前端组件,旨在将 Apple iOS 26 的“液态玻璃”视觉效果引入 React 应用。凭借逼真折射、多种反射模式、响应式交互及高度可配置性,它已获得 2.8k stars,成为提升 UI 质感的热门工具。
741 0
|
7月前
|
人工智能 前端开发 数据可视化
天都塌了,17K+ Star 的AI开源神器!Onlook 如何颠覆前端开发与设计协作?怎么办
Onlook是一款开源的视觉优先代码编辑器,结合Figma直观操作与VS Code强大功能,支持浏览器中实时构建、编辑和部署React应用。项目已获17K+Star,提供快速创建Next.js应用、所见即所得的可视化编辑、AI驱动开发工具及一键部署协作等功能,是前端开发与设计协作的理想选择。
1088 0
|
机器学习/深度学习 人工智能 自然语言处理
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
DeepSeek Artifacts是Hugging Face推出的免费AI编程工具,基于DeepSeek V3,支持快速生成React和Tailwind CSS代码,适合快速原型开发和前端组件构建。
2489 39
DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
|
11月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
564 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
388 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
|
10月前
|
JSON 人工智能 前端开发
前端开发中使用whistle代理工具
Whistle是一款强大的代理工具,相比Charles、Fiddler更轻量且功能丰富。它适用于前端开发中的多种场景,如接口数据Mock、接口代理、静态资源代理等。通过简单的规则配置,可将接口指向本地JSON文件,解决跨域问题,或代理静态资源以满足特定域名访问需求。此外,Whistle还支持本地端口间转发与移动端请求抓包,搭配SwitchyOmega插件使用效果更佳。需注意,使用前请确保已安装Node环境并参考官方文档完成基础配置。

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    700
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    302
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    259
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    210
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    313
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    452
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    200
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    145
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    214
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    287