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

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

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

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

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

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

因为我以前上班每天必逛知乎,张宏波老师在知乎的技术圈子里非常有名,其主导设计的 ReScript 编程语言,在当时的 补天行动(弥补JS天坑) 中性能优异,备受瞩目。同时期的还有 TypeScriptFlowElm 等,那么如今来看呢,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++RustGo 的后端程序员才能使用熟悉的编程语言产生可供实际运行的 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.devexamples 目录下。

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

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

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

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

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

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

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

相关推荐
袁煦丞7 分钟前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
简佐义的博客8 分钟前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang
天天扭码15 分钟前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
Code blocks35 分钟前
使用Jenkins完成springboot项目快速更新
java·运维·spring boot·后端·jenkins
codeGoogle1 小时前
不吹不黑理性讨论:疑似华为员工匿名指控盘古大模型造假,你怎么看?
程序员
追逐时光者1 小时前
一款开源免费、通用的 WPF 主题控件包
后端·.net
蜗牛沐雨1 小时前
警惕 Rust 字符串的性能陷阱:`chars().nth()` 的深坑与高效之道
开发语言·后端·rust
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js