MoonBit助力前端开发，加密&性能两不误，斐波那契测试提高3-4倍

大家好，我是 前端之虎陈随易，也是 MoonBit 官方认证的 布道师，欢迎大家与我交朋友，我所有文章均为古法手写无 AI。

我的个人网站 https://chensuiyi.me
MoonBit 开发网：https://moonbit.dev

请注意，这不是单纯的技术教程，而是与各位交朋友，分享代码行间的故事，心得，经验与技术，不喜请移步。

这是 MoonBit 的第一篇文章，做了很多准备工作，比如购买了 https://moonbit.dev 域名，并花了数天时间在 AI 的协助下，设计了 MoonBit 的介绍页。

与 MoonBit 的缘分，要追溯到2024年4月份，彼时我正在准备我的 随易周刊，偶然看到 MoonBit 的文章，其创始人 张宏波 老师让我瞬间来了兴趣。

因为我以前上班每天必逛知乎，张宏波老师在知乎的技术圈子里非常有名，其主导设计的 ReScript 编程语言，在当时的 补天行动(弥补JS天坑) 中性能优异，备受瞩目。同时期的还有 TypeScript、Flow、Elm 等，那么如今来看呢，TypeScript 已成这场 补天竞赛 中的最大赢家。

随着时间的推移，张宏波老师于2022年，带来了他的最新力作，也就是本文的主角：MoonBit 编程语言，中文名称叫做 月兔。

第一次了解到 MoonBit，对我吸引力最大的就是其优秀的 wasm 能力，这也是继 Docker 之后，下一个可能会改变行业的开发和生态的技术。

可以看到上图中，MoonBit 在运行速度、产物大小上，与 Rust 不相上下，在编译时间上面，更是遥遥领先。

由此，让我对 MoonBit 的兴趣徒增，并花了一些时间研究和学习，接下来，我在本文中分享 MoonBit 在前端开发中的 源码加密 和 性能提升 方面的应用，并提供详细的评测数据。

前端源码加密这个问题，大部分情况是不需要的，一般来说，核心逻辑都在服务端，前端仅仅只是展示界面，调用接口而已。

但事无绝对，比如我就遇到了前端源码需要加密的问题，也是因此才被 MoonBit 的 Wasm 优秀特性深深吸引。

原因很简单，我做了一个产品，核心代码就在前端，也就是说，我做的是一个 强前端，弱后端 项目，那么为了保护自己的研究成果，增加源码被破解的难度，就必须要对源码进行一些 反破解 手段。

最常见的就是 JS 混淆，通过诸如 javascript-obfuscator 这样的开源项目来对代码进行加工。

js 复制代码

function hi() {
    console.log('Hello World!');
}
hi();

如上 👆 几行简单的代码，被 javascript-obfuscator 加工后，就会生成如下代码 👇：

js 复制代码

function hi() {
    var e = (function () {
        var g = !![];
        return function (h, i) {
            var j = g
                ? function () {
                      if (i) {
                          var k = i['apply'](h, arguments);
                          i = null;
                          return k;
                      }
                  }
                : function () {};
            g = ![];
            return j;
        };
    })();
    var f = e(this, function () {
        var g;
        try {
            var h = Function('return\x20(function()\x20' + '{}.constructor(\x22return\x20this\x22)(\x20)' + ');');
            g = h();
        } catch (o) {
            g = window;
        }
        var i = (g['console'] = g['console'] || {});
        var j = ['log', 'warn', 'info', 'error', 'exception', 'table', 'trace'];
        for (var k = 0x0; k < j['length']; k++) {
            var l = e['constructor']['prototype']['bind'](e);
            var m = j[k];
            var n = i[m] || l;
            l['__proto__'] = e['bind'](e);
            l['toString'] = n['toString']['bind'](n);
            i[m] = l;
        }
    });
    f();
    console['log']('Hello\x20World!');
}
hi();

这是我把混淆参数调到最低的结果，稍微复杂点，这段代码会更加难以查看与理解。

但问题也很明显，主要有 2 个：

1️⃣ 破解难度提高，但有限

由于 javascript-obfuscator 是开源项目，而且是在前端加密，所以尽管被加工后的代码难以阅读和理解，但通过一些工具和手段，还是能破解的。

2️⃣ 增加运行开销，性能低

原本几行的代码，被增加了几倍，几十倍，必然会带来代码运行上的开销，所以性能降低是必然的，这是一个 鱼与熊掌 的问题，你既要性能，又要增加破解难度，还是有点不现实的。

问题的转机出现了，WebAssembly 技术在2019年前后作为 W3C 标准之一被推出，在一定程度上，可以说是完美地解决了以上 2 个问题，既能加密源码，又能提高运行性能。

但这么多年以来，WebAssembly 技术并没有在技术圈被广泛推广开来，原因之一就是由于其 偏后端 特性，也就是写 C/C++、Rust、Go 的后端程序员才能使用熟悉的编程语言产生可供实际运行的 wasm 产物。

还有一个办法就是直接写 WebAssembly 语法，如下：

wat 复制代码

(module
  (func $add (param $x i32) (param $y i32) (result i32)
    (i32.add
      (local.get $x)
      (local.get $y)
    )
  )
  (export "add" (func $add))
)

这是一个简单的加法函数，可以看到语法非常晦涩繁琐，要是写一个几百行的代码，脑袋都会冒烟。同时呢，请看文章开头的截图，Go 生成的 wasm 产物非常大，而 Rust 则以其语法复杂，编译严格，构建时间长而著称，MoonBit 在一定程度上弥补了 Go 和 Rust 在生成 wasm 上的问题。

本文主要是写给像我一样的前端开发者看的，那么对一些背景和概念的铺垫就到这里。接下来，我们通过实际测试，来看看 MoonBit 在前端开发中的 代码加密 和 性能提升 上面的优势，以行业惯例，斐波那契数列 开始。

以下均取自连续运行后的第 6 次测试结果。

js 复制代码

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

👆 这是 JavaScript 的斐波那契函数代码和性能测试结果。

moonbit 复制代码

fn fibonacci(n : Int) -> Int {
    if n <= 1 {
        n
    } else {
        fibonacci(n - 1) + fibonacci(n - 2)
    }
}

👆 这是 MoonBit(wasm) 的斐波那契函数代码和性能测试结果。

源码和测试案例在 github 开源仓库 https://github.com/chenbimo/moonbit.dev 的 examples 目录下。

根据测试结果来看，使用 MoonBit 编译成 wasm 后，二者计算 fibonacci(40) 的性能，MoonBit 方案是 JavaScript 方案的 3-4倍 左右。

那么 wasm 代码长啥样呢？如下 (截图部分)：

可以看到，同样的一个功能，使用 MoonBit 编译成 wasm 后，不仅加密程度更高，而且代码的运行效率更是提高了 3-4 倍，可谓是 一箭双雕。

生成的 fibonacci.wasm 文件大小，也仅仅只有不到 5kb，非常轻量。

这就是本文所分享的使用 MoonBit 如何解决前端开发中的 源码加密 和 性能提升 问题。

笔者目前也是一边学习 MoonBit，一边写文章或视频分享 MoonBit 的应用场景，学习心得，使用经验等，希望能给大家带来帮助，让国产编程语言在世界的舞台上，闪耀夺目的光彩。

看到这里，来个一键三连 (点赞、评论、转发) 吧，谢谢各位啦~