作者：梁棒棒
簡介
electron打包工具有兩個：electron-builder腿宰，electron-packager，官方還提到electron-forge器联，其實它不是一個打包工具采呐，而是一個類似于cli的工具集，目的是簡化開發(fā)到打包的一整套流程汛兜，內(nèi)部打包工具依然是electron-packager任柜。
electron-builder與electron-packager相比各有優(yōu)劣谅摄，electron-builder配置項較多法精，更加靈活多律，打包體積相對較小，同時上手難度大搂蜓；而electron-packger配置簡單易上手狼荞，但是打出來的應(yīng)用程序包體積相對較大。
我們選擇electron-builder作為electron-playground項目的打包工具帮碰，配合webpack實現(xiàn)更靈活的打包配置相味。打包配置在electron-playground中已有說明，這里不再贅述殉挽，主要講述一下打包一個electron項目的優(yōu)化點丰涉，打包優(yōu)化分為打包時間優(yōu)化和體積優(yōu)化，本篇講述體積優(yōu)化此再。
node_modules優(yōu)化
electron空項目打包后的dmg體積在75M左右昔搂，32位exe文件體積在52M左右玲销，64位的exe體積則為105M左右输拇。
注：空項目依賴版本為：electron: ^10.1.5 electron-builder: ^22.9.1 系統(tǒng)版本為：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 <解壓后的目錄>
解壓然后看下包中有哪些內(nèi)容：
dist和resources是配置項中指定的需要復制打包的內(nèi)容，這沒有問題跋理，可是node_modules中的依賴項已經(jīng)在webpack打包構(gòu)建時一同打包進了dist下择克，它不應(yīng)該在這里，而且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（僅僅生產(chǎn)依賴項會被復制）在任何情況下都會被添加至自定義（應(yīng)該是files配置項下吧）中骡湖。
那這就很清楚了，我只需要在files中添加"!node_modules"即可峻厚，打包后體積是128M响蕴，足足小了37M，安裝執(zhí)行目木，沒有問題换途。
依賴項的問題解決了，但是體積還是沒達預期刽射，查看包內(nèi)容军拟，果然，圖片誓禁！這個永遠也避不開的優(yōu)化難題懈息。
圖片優(yōu)化
圖片優(yōu)化在整個項目的優(yōu)化中是優(yōu)先級較高的，所謂的圖片優(yōu)化摹恰，其實是體積與質(zhì)量之間的博弈辫继，因此要想減小包中圖片的體積，是要犧牲一部分圖片質(zhì)量的俗慈，也就是清晰度姑宽。做出如下優(yōu)化：
- 首先對gif圖在不影響用戶觀看的前提下做了一定壓縮；
- 將一些png（流程圖闺阱，logo炮车，線條簡單的）轉(zhuǎn)為svg；
- 將一些截圖png轉(zhuǎn)為jpg；
最終將整體包體積dmg減小至102M瘦穆，ia32exe為80M左右（后續(xù)功能更新會有一定出入）纪隙；
依賴項，按需加載
然后檢查一下依賴項的位置和引用扛或，首先對于package.json中依賴項進行排查绵咱，查看dependencies和devDependencies中的依賴項有沒有錯位的（開發(fā)依賴項寫在了生產(chǎn)依賴項中），由于打包時只打包dependencies中的依賴項熙兔，所以在生產(chǎn)環(huán)境中用不到的依賴項一律塞至devDependencies悲伶。
然后再檢查引用庫的按需加載，首先想到項目中使用了antd框架住涉。
官方文檔寫到：
antd默認支持基于 ES modules 的 tree shaking拢切，對于 js 部分，直接引入import { Button } from 'antd'就會有按需加載的效果秆吵。
以防萬一淮椰，檢查一下，使用webpack-bundle-analyzer可視化插件看一下依賴體積圖示纳寂，結(jié)果如下主穗。
并沒有找到antd，左側(cè)抽屜中搜了一下毙芜，確定是按需加載忽媒。
雙package.json
官方重構(gòu)了生產(chǎn)依賴項，提出雙package.json結(jié)構(gòu)（two package.json）腋粥。顧名思義晦雨，通過兩個package.json管理依賴項。一個用來管理開發(fā)依賴項隘冲，一個管理應(yīng)用程序依賴項闹瞧，最終打包時只打包應(yīng)用程序依賴項。
-
開發(fā)依賴
此package.json在項目根目錄下展辞，文件中聲明開發(fā)依賴和打包腳本奥邮；
-
應(yīng)用程序依賴；
在app文件夾下罗珍，聲明應(yīng)用程序依賴洽腺，打包時僅打包此文件中聲明的依賴。所有的元字段應(yīng)當在此文件聲明（version覆旱，name等）蘸朋。
版本
electron版本也會對打包體積有影響，這里用electron^8和10.1.5小試一下扣唱，下圖左為8版本藕坯，右為10版本厕宗。或許系統(tǒng)版本對打包體積也有影響堕担，這里不做嘗試了，有條件同學的可以試一下曲聂。
對 Electron 感興趣霹购？請關(guān)注我們的開源項目 Electron Playground，帶你極速上手 Electron朋腋。
我們每周五會精選一些有意思的文章和消息和大家分享齐疙，來掘金關(guān)注我們的 曉前端周刊。
我們是好未來 · 曉黑板前端技術(shù)團隊旭咽。
我們會經(jīng)常與大家分享最新最酷的行業(yè)技術(shù)知識贞奋。
歡迎來 知乎、掘金穷绵、Segmentfault轿塔、CSDN、簡書仲墨、開源中國勾缭、博客園 關(guān)注我們。
