共计 2955 个字符，预计需要花费 8 分钟才能阅读完成。
作者：梁棒棒
简介
electron 打包工具有两个：electron-builder，electron-packager，官网还提到 electron-forge，其实它不是一个打包工具，而是一个相似于 cli 的工具集，目标是简化开发到打包的一整套流程，外部打包工具仍然是 electron-packager。
electron-builder 与 electron-packager 相比各有优劣，electron-builder 配置项较多，更加灵便，打包体积绝对较小，同时上手难度大；而 electron-packger 配置简略易上手，然而打进去的利用程序包体积绝对较大。
咱们抉择 electron-builder 作为 electron-playground 我的项目的打包工具，配合 webpack 实现更灵便的打包配置。打包配置在 electron-playground 中已有阐明，这里不再赘述，次要讲述一下打包一个 electron 我的项目的优化点，打包优化分为打包工夫优化和体积优化，本篇讲述体积优化。
node_modules 优化
electron 空我的项目打包后的 dmg 体积在 75M 左右，32 位 exe 文件体积在 52M 左右，64 位的 exe 体积则为 105M 左右。
注：空我的项目依赖版本为：electron: ^10.1.5 electron-builder: ^22.9.1 零碎版本为：macOS Catalina 10.15.6。
而咱们的我的项目打包后 dmg 体积为 165M，ia32exe 也在 128M 左右，比预期大很多，剖析一下包，在 release ->【版本号命名的文件夹】-> win-ia32-unpacked -> resources 下有个 app.asar 文件，这其实是个压缩包，目标是爱护代码隐衷，在 build 中可配置是否须要压缩为 asar 包。
在 electron-builder.yml 中退出：
asar: true用 asar 工具包解压。
# 装置
npm install asar -g
# 解压
asar extract app.asar < 解压后的目录 > 解压而后看下包中有哪些内容：
dist 和 resources 是配置项中指定的须要复制打包的内容，这没有问题，可是 node_modules 中的依赖项曾经在 webpack 打包构建时一起打包进了 dist 下，它不应该在这里，而且 electron-builder 配置项 files 中也没有指定复制此文件夹。带着这个疑难，查看一下文档，终于找到了起因，原来 files 有默认值：
[
"**/*",
"!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",
"!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}",
"!**/node_modules/*.d.ts",
"!**/node_modules/.bin",
"!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}",
"!.editorconfig",
"!**/._*",
"!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}",
"!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}",
"!**/{appveyor.yml,.travis.yml,circle.yml}",
"!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json}"
]package.json and **/node_modules/**/* (only production dependencies will be copied) is added to your custom in any case.
意思是：package.json 和 node_modules（仅仅生产依赖项会被复制）在任何状况下都会被增加至自定义（应该是 files 配置项下吧）中。 那这就很分明了，我只须要在 files 中增加 ”!node_modules” 即可，打包后体积是 128M，足足小了 37M，装置执行，没有问题。
依赖项的问题解决了，然而体积还是没达预期，查看包内容，果然，图片！这个永远也避不开的优化难题。
图片优化
图片优化在整个我的项目的优化中是优先级较高的，所谓的图片优化，其实是体积与品质之间的博弈，因而要想减小包中图片的体积，是要就义一部分图片品质的，也就是清晰度。做出如下优化：
- 首先对 gif 图在不影响用户观看的前提下做了肯定压缩；
- 将一些 png（流程图，logo，线条简略的）转为 svg；
- 将一些截图 png 转为 jpg；
最终将整体包体积 dmg 减小至 102M，ia32exe 为 80M 左右（后续性能更新会有肯定出入）；
依赖项，按需加载
而后检查一下依赖项的地位和援用，首先对于 package.json 中依赖项进行排查，查看 dependencies 和 devDependencies 中的依赖项有没有错位的（开发依赖项写在了生产依赖项中），因为打包时只打包 dependencies 中的依赖项，所以在生产环境中用不到的依赖项一律塞至 devDependencies。
而后再查看援用库的按需加载，首先想到我的项目中应用了 antd 框架。
官网文档写到：
antd默认反对基于 ES modules 的 tree shaking，对于 js 局部，间接引入import {Button} from 'antd'就会有按需加载的成果。
以防万一，检查一下，应用 webpack-bundle-analyzer 可视化插件看一下依赖体积图示，后果如下。
并没有找到 antd，左侧抽屉中搜了一下，确定是按需加载。
双 package.json
官网重构了生产依赖项，提出双 package.json 构造（two package.json）。顾名思义，通过两个 package.json 治理依赖项。一个用来治理开发依赖项，一个管理应用程序依赖项，最终打包时只打包应用程序依赖项。
- 开发依赖
此 package.json 在我的项目根目录下，文件中申明开发依赖和打包脚本；
- 应用程序依赖；
在 app 文件夹下，申明应用程序依赖，打包时仅打包此文件中申明的依赖。所有的元字段该当在此文件申明（version，name 等）。
版本
electron 版本也会对打包体积有影响，这里用 electron^8 和 10.1.5 小试一下，下图左为 8 版本，右为 10 版本。或者零碎版本对打包体积也有影响，这里不做尝试了，有条件同学的能够试一下。
对 Electron 感兴趣？请关注咱们的开源我的项目 Electron Playground，带你极速上手 Electron。
咱们每周五会精选一些有意思的文章和音讯和大家分享，来掘金关注咱们的 晓前端周刊。
咱们是好将来 · 晓黑板前端技术团队。
咱们会常常与大家分享最新最酷的行业技术常识。
欢送来 知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园 关注咱们。
