共计 4476 个字符，预计需要花费 12 分钟才能阅读完成。
概述
在基于 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
