【electron-playground系列】打包優化之路

做者：梁棒棒

簡介

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、簡書、開源中國、博客園 關注咱們。