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

2024-09-01 14:20
文章标签 编译 速度 mako 试玩 飞起

本文主要是介绍Mako 试玩|编译速度6到飞起!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

嗨!我是小谷,大家好久不见~

今天想和大家分享的技术是 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
在这里插入图片描述

据 SWC 在官网的介绍来看,SWC 在单线程上的编译速度比 Babel 快 20 倍,如果在 4 核设备上开启并行计算,其执行速度将是 Babel 的 70 倍!

感兴趣的朋友也可以自己测试玩玩~

参考文档

1.https://zhuanlan.zhihu.com/p/705866602
2.https://makojs.dev/

这篇关于Mako 试玩|编译速度6到飞起!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1127180

相关文章

maven 编译构建可以执行的jar包

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」👈,「stormsha的知识库」👈持续学习,不断总结,共同进步,为了踏实,做好当下事儿~ 专栏导航 Python系列: Python面试题合集,剑指大厂Git系列: Git操作技巧GO

Windows环境利用VS2022编译 libvpx 源码教程

libvpx libvpx 是一个开源的视频编码库,由 WebM 项目开发和维护,专门用于 VP8 和 VP9 视频编码格式的编解码处理。它支持高质量的视频压缩,广泛应用于视频会议、在线教育、视频直播服务等多种场景中。libvpx 的特点包括跨平台兼容性、硬件加速支持以及灵活的接口设计,使其可以轻松集成到各种应用程序中。 libvpx 的安装和配置过程相对简单,用户可以从官方网站下载源代码

Golang test编译使用

创建文件my_test.go package testsimport "testing"func TestMy(t *testing.T) {t.Log("TestMy")} 通常用法: $ go test -v -run TestMy my_test.go=== RUN TestMyTestMy: my_test.go:6: TestMy--- PASS: TestMy (0.

C++/《C/C++程序编译流程》

程序的基本流程如图:   1.预处理        预处理相当于根据预处理指令组装新的C/C++程序。经过预处理,会产生一个没有宏定义,没有条件编译指令,没有特殊符号的输出文件,这个文件的含义同原本的文件无异,只是内容上有所不同。 读取C/C++源程序,对其中的伪指令(以#开头的指令)进行处理将所有的“#define”删除,并且展开所有的宏定义处理所有的条件编译指令,如:“#if”、“

编译linux内核出现 arm-eabi-gcc: error: : No such file or directory

external/e2fsprogs/lib/ext2fs/tdb.c:673:29: warning: comparison between : In function 'max2165_set_params': -。。。。。。。。。。。。。。。。。。 。。。。。。。。。。。。。 。。。。。。。。 host asm: libdvm <= dalvik/vm/mterp/out/Inte

使用WebP解决网站加载速度问题,这些细节你需要了解

说到网页的图片格式,大家最常想到的可能是JPEG、PNG,毕竟这些老牌格式陪伴我们这么多年。然而,近几年,有一个格式悄悄崭露头角,那就是WebP。很多人可能听说过,但到底它好在哪?你的网站或者项目是不是也应该用WebP呢?别着急,今天咱们就来好好聊聊WebP这个图片格式的前世今生,以及它值不值得你花时间去用。 为什么会有WebP? 你有没有遇到过这样的情况?网页加载特别慢,尤其是那

QT 编译报错:C3861: ‘tr‘ identifier not found

问题: QT 编译报错:C3861: ‘tr’ identifier not found 原因 使用tr的地方所在的类没有继承自 QObject 类 或者在不在某一类中, 解决方案 就直接用类名引用 :QObject::tr( )

hector_quadrotor编译总结 | ubuntu 16.04 ros-kinetic版本

hector_quadrotor编译总结 | ubuntu 16.04 ros-kinetic版本 基于Ubuntu 16.04 LTS系统所用ROS版本为 Kinetic hector_quadrotor ROS包主要用于四旋翼无人机的建模、控制和仿真。 1.安装依赖库 所需系统及依赖库 Ubuntu 16.04|ros-kinetic|Gazebo|gazebo_ros_pkgs|ge

hector_quadrotor编译总结 | ubuntu 14.04 ros-indigo版本

hector_quadrotor编译总结 | ubuntu 14.04 ros-indigo版本 基于Ubuntu 14.04 LTS系统所用ROS版本为 Indigo hector_quadrotor ROS包主要用于四旋翼无人机的建模、控制和仿真。 备注:两种安装方式可选:install the binary packages | install the source files

编译和链接那点事下

http://www.0xffffff.org/?p=357 上回书我们说到了链接以前,今天我们来研究最后的链接问题。         链接这个话题延伸之后完全可以跑到九霄云外去,为了避免本文牵扯到过多的话题导致言之泛泛,我们先设定本文涉及的范围。我们今天讨论只链接进行的大致步骤及其规则、静态链接库与动态链接库的创建和使用这两大块的问题。至于可执行文件的加载、可执行文件的运行时