Mako 试玩|编译速度6到飞起！

news2024/9/21 14:46:42

嗨！我是小谷，大家好久不见～

今天想和大家分享的技术是 Mako , 一款编译构建速度比 webpack 快 10 倍～100 倍的前端构建工具。

网上有传言将 Mako 比作前端脚手架里的 鲨鱼心脏 ，有了它，前端工程师工作的幸福指数可以提升好多倍，那么就让我们一起来看看 Mako 究竟有什么魅力吧！

什么是 Mako?

近年来，前端领域的脚手架层出不穷，前有开山鼻祖 Webpack , 后有 Turbopack、Rspack 等一些后起之秀。

新出的脚手架都会以冷启动、热更新、冷构建的耗时作为性能对比的佐证。

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

从官网的性能对比报告来看，相比于其他的前端构建工具，Mako 在冷启动、热更新、冷构建都有较好的表现：

冷启动	根更新	叶更新	冷构建

知识科普： Root HMR 与 Leaf HMR 是什么关系？

Root HMR 指的是应用根组件的热模块替换，通常是对应用的最外层组件（通常是根组件）进行热替换更新，确保整个应用能够保持一致性和状态。

Leaf HMR 指的是更精细粒度的模块替换，通常是对具体组件或模块的热更新。它意味着某个特定的组件或模块在发生改变时，仅该组件或模块进行热替换，不影响其他部分的执行。

Mako 试玩

据 Mako 的核心作者 sorrycc 在文章中的介绍，针对 Ant Design Pro 全量项目的构建，Webpack 用时 16s，Mako 用时 3.9s，提速 4 倍。在此基础上，在 Ant Design Pro 全量项目的构建中，Mako 基本都是实时热更。

听起来效果是很辣，让我们一起来亲自实践一下：

Benchmark 作为热门的性能评估工具，内置了几个性能对比的项目，也是大家都在跑的 Turbopack 测试项目。

下图展示了 mako 、rsbuild 、farm 、vite 、webpack 五款前端构建工具在冷启动、根节点热更新、叶节点热更新、冷构建、打包尺寸几个方面的性能对比：

在这里插入图片描述

可以发现，针对同样的测试项目，webpack 冷启动耗时 6.5s , mako 仅需 1.1s ！！！
除此之外，在热更新和冷构建方面，mako 的表现比 webpack 更是优异近 10 倍！！！

Mako 为什么这么快？

不难发现，在 Mako 的官网介绍中，一个显目的语言是 Rust ，Mako 编译构建如此之快的核心原因也是因为舍弃了传统的 JS/TS 语法，转而使用 Rust 来从 0 到 1 构建前端打包工具。

实际上，Rspack、Turbopack 也是基于 Rust 来实现的。
在这里插入图片描述

借用 Rust 官网中的 slogan：

A language empowering everyone to build reliable and efficient software.
一个使每个人都能够构建可靠且高效软件的语言。

很容易从中得出两个结论：
1.Rust 是一门语言
2.Rust 的核心竞争力是 安全可靠 & 性能出众 。

作为一门与 C 语言并列，可直接与操作系统交互的系统级编程语言，诞生于 2006 年，它的作者是 Mozilla 的工程师 Graydon Hoare 。

Graydon Hoare 发明 Rust 语言的初心是为了解决 C 和 C++ 所固有的安全问题，而在 Rust 正式对外发布前，Graydon Hoar 所在的团队花费了近 10 年的时间进行设计打磨。

更令人意想不到的是，自 2016 年起，Rust 就一直蝉联 Stack Overflow 年度最受欢迎的编程语言冠军。

Rust 为什么这么快？

借助网友们一句评价：一门编程语言极致的性能在于对计算机硬件资源的极致利用。

在此基础上，对计算机内存资源的极致利用，就是对极致性能的有力保障。

在众多编程语言中，关于内存管理可以大致分为两大阵营：

1.手动内存管理：代表语言是 C，C++ 等，它给开发者足够的自由度去掌控内存资源，但是它经常会带来一个问题 —— 开发者无法保障内存安全

2.自动内存管理：代表语言有 Java，Python，JavaScript 等，它通过专门的 GC 机制（垃圾回收器）让开发者不必关心内存回收问题，GC 会以一定频率检查和释放不再被使用的内存。但这种自动管理内存的机制也有一个天然的症结 —— GC 会损耗程序性能

如果有一门语言在没有 GC 机制的情况下，能够保证内存安全调用，即可将计算机内存资源的利用发挥到极致。这也是国内外众多追求极致性能的工具选择使用 Rust 的原因：

Rust 提出的所有权机制，实现了没有 GC 的自动内存管理模式。

在 Rust 的语法中，一个值始终只被一个变量所拥有，即使是通过引用赋值的方式，存储于计算机堆中的值也只与最后被赋值的栈变量关联，而之前的栈变量则会回归到未初始化的状态。

在这里插入图片描述

Rust 为什么可以编译为 TS/JS 的代码？

Rust 和 JavaScript 本质是两种语言，为什么可以用 Rust 来编写前端构建工具？.rs 的文件为什么可以转译成 .ts 文件和 .js 文件？这其实得益于 WebAssembly（Wasm）技术的支持。

WebAssembly 是一种可移植、高性能的二进制格式，可在 Web 浏览器中执行。

Rust 具有对 WebAssembly 的良好支持，通过将 Rust 代码编译为 WebAssembly 格式，即可在现代的 Web 浏览器中运行。

在此基础上，Rust提供了 wasm-bindgen 工具，可以帮助将 Rust 代码编译为 WebAssembly ，并为WebAssembly 模块提供 JavaScript 和 TypeScript 绑定。

这使得 Rust 编写的代码可以与 JavaScript 代码进行无缝互操作，包括直接调用 JavaScript 函数，使用 JavaScript 对象，以及被 JavaScript 调用。

学习过 Webpack 的同学应该对 Babel 不陌生，Webpack 本质是一个打包机，可以将非 js 的语言转换为 js 的语言，而 Babel 则可以将高级的 JS 语法转换为浏览器可以识别的低级别 JS 语法。

在 Rust 中，也有这样的编译工具：SWC 。
在这里插入图片描述