开发过Electron客户端的都知道,在package.json的build节点下,如果设置"asar": true,软件打包时会把程序文件合成为一个app.asar文件。软件安装后,可以在安装目录的resources子目录下找到它。

// package.json
  "build": {
    ...
    "asar": true,
    ...
  }

app.asar看起来是一个压缩包(像.zip或.7z),有些神秘兮兮的。而事实上,它只是一种打包格式,只是把一个个文件拼接起来,并没有做任何压缩。因为一个包里容纳了多个文件,需要对各个文件做索引,加上这些索引信息后,.asar文件大小实际上超过各个文件加起来的总和。有点小意外吧!

.asar的格式不是秘密,可以将它轻松还原。接下来,大家就跟着我一起演练一下吧(也可以到https://github.com/electron/asar 了解更多细节),分两步:

1. 全局安装asar插件:

npm install -g asar

2. 对指定的app.asar文件执行extract命令,格式为:

asar extract "<源路径>\app.asar" “<目标路径>”

以UX设计师常用工具Figma为例(访问网站www.figma.com,注册/登录后点击网页右上角的用户头像,在下拉菜单中选择“Get desktop app”,下载安装即可),执行如下命令:

asar extract "<你电脑上的安装路径>\Figma\app-108.1.0\resources\app.asar" D:\Test1

我们就可以把Figma的app.asar解开,释放到D:\Test1中。再去D:\Test1看一下,太惊喜了——一堆.js源文件呢!而且没有经过任何混淆,有兴趣的同学可以尽情研究一下人家的源代码!再进一步验证一下:app.asar文件大小是1.55MB,而D:\Test1下的所有文件大小是3.55MB,怎么回事?不是说.asar不做压缩吗?没错!回到Figma的安装目录,你会看到一个app.asar.unpacked目录,里面的文件正好是2MB。在执行asar extract命令的时候,它其实会把app.asar.unpacked目录下的文件一起拷贝到D:\Test1下。(小插曲:在演练的时候我踩过一个坑:因为app.asar的安装路径太深了,我先把它拷贝到D盘,然而在执行asar extract命令时报错了,说找不到app.asar.unpacked目录,哦……我明白了!)

接下来,我们再顺便探索一下其他Electron客户端软件吧。比如微软的Teams,对app.asar解包后,我们打开它的主程序入口文件main.bundle.js,看到如下内容:

!function(e,t){for(var n in t)e[n]=t[n]}(exports,function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};

源代码显然是被混淆过的,对人类不太友好,直接放弃吧。再来看GitHub Desktop,有趣的是,在它的安装目录下没有app.asar,然后打开main.js,发现跟Teams类似也是做了代码混淆的。再来看一个叫Lofelt Studio的软件,把它的app.asar解包后,打开main.js看到代码也是被混淆过的,再打开package.json可以发现它是基于React框架开发的,通过webpack编译打包出来的.js文件自然就是这种效果啦。如果大家还意犹未尽的话,https://www.electronjs.org/apps 还有更多Electron App,说不定能探到宝哦!

本文即将收尾,我猜,大家心里可能还有个疑问:.asar既不做加密,也不做压缩,那它还有什么价值呢?没错!使用asar打包不是必需的,就像GitHub Desktop那样。而使用asar打包,网传也有一些好处,比如:如果我们的程序依赖的某些资源路径很深,而在Windows上对资源路径的长度是有限制的,路径过长就会加载失败,使用asar打包就能绕开这个问题;另外,程序运行时加载一个总的.asar文件,比起加载一堆零散的小文件,可以避免磁盘的频繁寻址,在性能上会有一些收益——我觉得,有道理~

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐