> 作者：[樑棒棒](https://juejin.im/user/1662117310636238) ## 簡介 electron打包工具有兩個：[electron-builder](https://www.electron.build/)，[electron-packager](https://github.com/electron/electron-packager)，官方還提到[electron-forge](https://github.com/electron-userland/electron-forge)，其實它不是一個打包工具，而是一個類似於cli的工具集，目的是簡化開發到打包的一整套流程，內部打包工具依然是[electron-packager](https://github.com/electron/electron-packager)。 [electron-builder](https://www.electron.build/)與[electron-packager](https://github.com/electron/electron-packager)相比各有優劣，[electron-builder](https://www.electron.build/)配置項較多，更加靈活，打包體積相對較小，同時上手難度大；而[electron-packger](https://github.com/electron/electron-packager)配置簡單易上手，但是打出來的應用程式包體積相對較大。 我們選擇[electron-builder](https://www.electron.build/)作為[electron-playground](https://github.com/tal-tech/electron-playground)專案的打包工具，配合webpack實現更靈活的打包配置。打包配置在[electron-playground](https://github.com/tal-tech/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中加入： ```shell asar: true ``` 用asar工具包解壓。 ```shell # 安裝 npm install asar -g # 解壓 asar extract app.asar <解壓後的目錄> ``` 解壓然後看下包中有哪些內容：  dist和resources是配置項中指定的需要複製打包的內容，這沒有問題，可是node_modules中的依賴項已經在webpack打包構建時一同打包進了dist下，它不應該在這裡，而且electron-builder配置項files中也沒有指定複製此資料夾。帶著這個疑問，檢視一下[文件](https://www.electron.build/configuration/contents)，終於找到了原因，原來files有預設值： ```json [ "**/*", "!**/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框架。 > [官方文件](https://ant.design/docs/react/getting-started-cn#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD)寫到：`antd` 預設支援基於 ES modules 的 tree shaking，對於 js 部分，直接引入 `import { Button } from 'antd'` 就會有按需載入的效果。 以防萬一，檢查一下，使用[webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)視覺化外掛看一下依賴體積圖示，結果如下。  並沒有找到antd，左側抽屜中搜了一下，確定是按需載入。  ## 雙package.json 官方重構了生產依賴項，提出雙package.json結構（[two package.json](https://www.electron.build/tutorials/two-package-structure.html)）。顧名思義，通過兩個package.json管理依賴項。一個用來管理開發依賴項，一個管理應用程式依賴項，最終打包時只打包應用程式依賴項。 - 開發依賴 此package.json在專案根目錄下，檔案中宣告開發依賴和打包指令碼； - 應用程式依賴； 在app資料夾下，宣告應用程式依賴，打包時僅打包此檔案中宣告的依賴。所有的元欄位應當在此檔案宣告（version，name等）。 ## 版本 electron版本也會對打包體積有影響，這裡用electron^8和10.1.5小試一下，下圖左為8版本，右為10版本。或許系統版本對打包體積也有影響，這裡不做嘗試了，有條件同學的可以試一下。     *** > 對 Electron 感興趣？請關注我們的開源專案 [Electron Playground](https://github.com/tal-tech/electron-playground)，帶你極速上手 Electron。 > > 我們每週五會精選一些有意思的文章和訊息和大家分享，來掘金關注我們的 [曉前端週刊](https://juejin.cn/collection/6901099462693748750)。 *** > 我們是好未來 · 曉黑板前端技術團隊。 > 我們會經常與大家分享最新最酷的行業技術知識。 > 歡迎來 [知乎](https://www.zhihu.com/people/xiao-hei-ban-qian-duan-ji-zhu)、[掘金](https://juejin.cn/user/1327865776581463)、[Segmentfault](https://segmentfault.com/u/xiaofe)、[CSDN](https://blog.csdn.net/xiaoheibanfe)、[簡書](https://www.jianshu.com/u/6517d7cd379e)、[開源中國](https://my.oschina.net/u/4876846)、[部落格園](https://www.cnblogs.com/xiaoheibanfe/) 關注