探秘app.asar

开发过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文件，比起加载一堆零散的小文件，可以避免磁盘的频繁寻址，在性能上会有一些收益——我觉得，有道理~