Electron 桌面應用開發系列文章-減小應用的打包體積

前言

筆者最近一直在使用 electron 開發一個可視化工具 Nowa (https://nowa-webpack.github.io/)，裡面的技術棧是

webpack2

babili

react

electron

electron-builder

使用過 electron 的人都知道，打出來的包是很大的，因為electron 內置了 Node & Chromium, 所以啥都還沒幹，打出來的應用安裝包就有幾十兆了。

無法在 electron 上做文章，那麼只好在 webpack 打包程序代碼的過程中搗鼓了。以前打包應用的時候，程序里會有文件夾。這次任務就是幹掉這個文件夾。

目錄結構

大家會發現這裡居然有兩個!! 其實主要是因為 electron-builder 的 Two package.json Structure (https://github.com/electron-userland/electron-builder/wiki/Two-package.json-Structure) 的設置。把打包需要的依賴與開發依賴完全分開，純粹打包你想要的東西，所以設置了 app 文件夾放這些。

electron-builder 只會對 app 文件夾進行打包，換句話說，這裡面有多少東西就會打包多少內容。

所以我們可以想法設法減少不必要的東西。比如這裡沒有任何依賴,是空的！

打包過程乾貨

結合 electron 的特殊環境，webpack 編譯過程有很多文章可以做。

1、 考慮 electron 的 Chromium & Node 版本

在 webpack 打包的時候，我們拋棄低版本瀏覽器的那些兼容，因為我們只用 Chromium，所以不必要的會增加編譯輸出的 preset 就不要了，比如，和一些 shim。

而且高版本的 node 已經支持一些 es6 的屬性了，我們真的需要降級到 es5 么？當然不是的。

A、 修改 babel 配置

推薦使用設置。這個 preset 主要可以設置項目當前的環境，適時進行引入新特性，如果對其沒有其他配置，就相當於使用了。

demo 裡面設置了是 electron 1.6 版本，如果不嫌麻煩的話，可以根據當前的 electron 的 node 和 chrome 版本進行分別設置。

比如：

B、 更換壓縮方案

通常我們以前的打包方案是這樣子的：

ES2015+ code -> Babel -> Babili/Uglify -> Minified ES5 Code

現在，我們可以不用降級這麼多，使用一個工具babili (https://github.com/babel/babili#why)（不要看成bilibili），它是 babel 的壓縮工具。

babili 的打包方案是這樣的：

ES2015+ code -> Babili -> Minified ES2015+ Code

它不會編譯成 es5 的版本，而是對當前版本進行壓縮。這簡直就是 electron 的絕配啊。

為了能在 webpack 中使用，我們需要引入一個插件。 這個是使用於生產環境的，所以我們 webpack 生產環境配置中可以這樣引入：

2、 對 main 端代碼進行打包

通常我們可能不對 main 端進行打包，我之前做的項目就沒打包，main 端的依賴全部都合入安裝包去了。如果 main 端依賴很大的話，那真是災難。

實際上 main 端也能進行打包，與 renderer 端一樣，輸出到目錄，這樣 node_modules 就空了。

然而，如果有引入第三方的 native node 模塊的話，筆者沒有嘗試過是否能行得通，猜測很可能還是要放到裡面保險。有嘗試過的看官請留言。

對 main & renderer 端打包代碼的時候，要注意設置 webpack 的欄位。

webpack 的 target 默認是。如果你沒有進行更改的話，renderer 端就無法使用 node 模塊了。

main 端注意事項

對 main 端打包的條件是有些條件的。

如果說您使用了的方式在 renderer 端引入了 main 端需要的模塊，那麼您需要在 app 目錄下放該模塊。

如果在 main 端調用了的方法去執行放在 app 文件夾裡面的js文件，而這些腳本依賴了非 node 原生模塊的時候，請把這些模塊安裝到 app 裡面的 node_modules 裡面。

main 端遇到的問題

main 端打包容易碰到如下問題：

依賴中出現這樣的語句或者包含了的腳本，這個使用您需要使用一些特殊的 loader 進行處理。

3、合適的renderer 端構建方案

筆者在renderer 端構建採用了 DLL(動態鏈接庫)方案, 也是 webpack 官方比較推薦的方案。它可以快速的提升構建速度，特別是明顯的提升第一次啟動的速度。在生產環境就不要使用它了，因為 dll 文件的體積比較大。

css 要使用與 js 代碼分離開來，不要合并，不要合并，因為文件體積同樣比較大。

4、 注意 electron 版本號 和 electron-builder 版本號

使用新的 electron 版本打包出來的安裝包會比舊版本大幾兆，其實很容易理解。

使用不同版本的 electron-builder 打包出來的也不同。大於 13.* 版本的打包出來的安裝包同樣大幾兆。

幾兆到底是幾兆呢？ demo 的例子實測是 3～5 MB。如果大家不care這幾兆的話其實無所謂。

對於 app 文件夾來說，幹掉 node_modules，可以大幅縮小很大一部分空間，依賴越多越明顯。但是對於整個 electron 應用來說，重要的是安裝包體積大小。

下面這個圖是我用兩個electron應用進行測試的例子。分別刪除了 node_modules 文件夾，用 electron-builder 打 dmg 安裝包的對比圖。

為了減小安裝包體積，筆者真是無所不用其極。

如果大家有更好的打包方式，請評論回復。

參考

https://github.com/chentsulin/electron-react-boilerplate

http://babeljs.io/docs/plugins/preset-env/

*https://babeljs.io/blog/2016/08/30/babili

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！