概述

在基于Umi搭建Electron App——从0到1中，应用webpack+electron-builder打包之后，最终生成的dist包体积过大，利用下载或更新时会影响用户体验。

electron-builder版本

在此文章提到的electron-builder版本均为^22.10.15。

打包文件剖析——简略工程

在对打包文件进行优化之前，首先须要剖析一下打包后的文件都有什么，各自占多大空间，找到优化的突破点。为了避免其余因素的烦扰，咱们先用最简略的electron工程来试一下。

electron-quick-start

感激由electron官网提供的疾速启动模板electron-quick-start，这个模板的构造和内容非常简单，没有集成第三方dependencies。目录构造以及package.json如下图所示：

在这个模板的根底上引入electron-builder作为打包工具，并做简略配置，如下图所示：

通过两种打包命令比照打包体积

electron-builder --dir、electron-builder

首先应用electron-builder --dir命令构建unpacked dir，应用这个命令构建出的包相较于间接应用electron-builder命令打出的包会少生成几个文件，其中占用空间最大的是.exe安装程序。比照图如下：


从图中能够看进去.exe程序大小达到了55.9MB。
再来比照一下dist包整体的大小：


从下面两张比照图能够看进去，这两种形式打包后包的体积差距在56MB，次要是差在安装程序Setup.exe文件上了。
ps：electron-builder 命令行接口请参考官网文档：Command Line Interface (CLI)。

一个最最最根本的electron工程打包后的体积未然达到了231MB，那么理论的我的项目恐怕只多不少。

打包文件的目录构造



次要看.exe文件和asar文件。

.exe文件

咱们运行的 electron.exe 可执行程序，实际上是早就曾经编译好的文件。他的性能就是加载 resources/app.asar 文件中的内容，包含入口文件的地位，也是从 app.asar 中打包的 package.json 的 main 字段来获取加载。
打包工具须要做的事件只是把这个 electron.exe 文件批改下图标、作者、版本等信息即可。（你不晓得的 Electron (二)：理解 Electron 打包）

这个最最最简略的electron工程的.exe文件大小为125MB

asar文件

asar是对源代码进行了打包封装。默认状况下，这些源代码是搁置在resources/app目录下明文可见的。asar就是对源代码进行最最根底的加密，让他人没有那么容易的就找到你的源代码。
从图中看到，这个简略的eletron工程的asar文件才54KB。理论我的项目的代码逻辑会比这个空我的项目多，所以asar的体积也会变大。
应用asar extract app.asar ./app 命令能够解压asar文件，解压之后的目录构造如下图：

asar中node_modules里只蕴含dependencies，不蕴含devDependencies，开发依赖是不会被打包进去的。如下图：


再来跟开发目录比照一下：

主过程、渲染过程的代码文件都是原样复制到asar包里的。须要明确一点的是：asar并不会对代码进行混同加密，解压之后还是可能看到原始的代码逻辑。

打包文件剖析——简单工程

basic-electron-umi-app

这个工程和electron-quick-start不同的是这个工程集成了umi、ant-design、react等等dependencies。而且打包形式相较于electron-quick-start也有很大的不同，如下图所示：（更多内容详见基于Umi搭建Electron App——从0到1）

web利用打包体积

应用umi内置的打包命令umi dev对web利用进行打包，最终生成的打包文件夹build大小如下图所示：

从上图中能够看进去web利用打包体积为3.73MB。

electron-builder --dir打包

先应用electron-builder --dir命令构建unpacked dir，最终生成的打包文件夹dist大小如下图所示：

从上图中看出应用electron-builder --dir打包后的dist文件夹大小为347MB。electron-builder打包时，是间接将web利用打包后的文件夹build复制到dist文件夹中的。去除掉web利用打包文件的3.73MB，dist包的大小为343.27MB，比electron-quick-start应用electron-builder --dir打包后的文件整整多出了100+MB。

electron-builder打包

应用electron-builder打包后的dist大小如下图所示：

生成的.exe文件大小如下图所示：

与electron-quick-start工程应用electron-builder打包后比照：Setup.exe文件多出20+MB，dist包多出100+MB。

打包文件的目录构造



次要看.exe文件和asar文件。

.exe文件

没有想到。。。basic-electron-umi-app跟electron-quick-start的.exe文件的大小竟然一毛一样的。。。都是125MB。

asar文件（找到优化突破口了！！）

basic-electron-umi-app的asar包大小为171MB，比electron-quick-start的asar包大了170+MB，这么多是差在哪块了？？？
应用asar extract app.asar ./app 命令解压asar文件，解压之后的目录构造如下图：

asar包中蕴含：web利用打包文件build、electron主过程文件、node_modules、package.json。
build包和main.js一共占用空间3MB+。node_modules大小166MB！！看来asar包体积大的起因找到了。
node_modules里的目录构造如下图：

太长了截不全，来看一下package.json吧：

这些dependencies依赖包其实在应用webpack对web利用进行打包的时候曾经打到build包里了，并进行了压缩和混同。看来electron-builder打包的时候把web利用的dependencies又打包了一遍，而且没做任何的解决。

electron-builder打包输入信息


从图中能够看出loaded configuration时是读取package.json中的配置。如果能将web利用和electron的package.json离开，就能够避免出现这个问题。electron-builder刚好反对双package.json构造。

优化之路

参考electron-builder官网文档Two package.json Structure（中文版本：双package.json构造），批改basic-umi-electron-app工程的构造及相干配置。

新建app文件夹

在工程根目录新建app文件夹。

public/main.js——>app/main.js

将之前放在public目录下的main.js文件挪动到app文件夹下。

app/package.json

在app文件夹中新建package.json文件。

  • 参考electron-builder官网文档configuration在package.json文件中增加一些形容信息
  • 装置electron、electron-builder作为开发依赖
  • 配置electron app主入口文件、主页、脚本命令
  • 对electron-builder做简略配置。

具体配置如下图所示：

app/package.json中增加electron-builder配置


和之前相比增加了一处配置：

  • main.js：之前的main.js是放到了public文件夹下，webpack打包时会将public文件夹下的所有文件复制到build包中，其实这样做也是能够的。然而为了将electron和web利用的构造分的更分明，所以将main.js挪到app文件夹下，并配置files，electron-builder打包时会将files中配置的文件复制到asar文件中。

    webpack打包配置批改

  • outputPath：将electron-builder的配置挪到了app文件夹下的package.json中，所以同样须要将web利用的打包输入门路改成app文件夹下，不然electron-builder打包的时候找不到build文件夹会报错

    app/main.js内容批改


    对main.js的批改除了文件地位的挪动之外，还有内容的批改。之前的main.js是在webpack打包的时候复制到build文件夹下的，main.js和index.html在同一文件夹下。当初改为应用electron-builder将main.js和build包同时打包到asar文件中，main.js和index.html不在同一文件夹下，所以loadFile的filePath须要批改成${__dirname}/build/index.html。

    ./package.json

    我的项目根目录下的package.json批改。

    electron-builder相干

  • 移除electron-builder开发依赖包
  • 移除electron-builder打包命令、配置信息

electron启动命令

  • 思考到开发过程中须要同时启动web利用和electron两个过程，所以electron启动脚本没有移除，然而批改了electron启动文件门路，由public/main.js改为app/main.js，见下图：

打包流程

  • 应用webpack打包web利用。在./package.json中执行yarn build命令。

  • 应用electron-builder打包桌面利用。在./app/package.json中执行dist-win32命令。

    打包文件的目录构造



    .exe文件

    basic-electron-umi-app.exe文件大小为112MB。比优化之前（125MB）缩小了13MB。

    asar文件

    asar文件大小为3.73MB。比优化之前（171MB）缩小了167.27MB。
    asar文件解压之后的目录构造如下图：

    dist包整体大小变动


    比照优化之前的404MB，dist包整体减小了186MB。

仓库地址

  • https://gitee.com/llj_8098/basic-electron-umi-app

    参考资料

  • 你不晓得的 Electron (二)：理解 Electron 打包
  • Electron 打包优化 - 从 393MB 到 161MB