我們通過Electron框架開發客戶端，在打包應用程序時通過electron-builder插件來打包應用程序會相對簡單。
1、首先通過npm install electron-builder --save下載該插件
2、下載完成后在跟目錄新建electron-builder.json配置文件,
下面介紹配置項，首先productName為應用程序的名稱
directories參數中的output問應用程序生成的路徑
files比較重要用來配置哪些文件會被打包哪些文件不會被打包
win參數是配置windows應用程序的的配置，icon為應用程序的圖標，target為應用程度要打包的方式，windows的話支持portable打包成免安裝文件，nisis，zip等等方式
mac為配置mac os系統的應用程序，linux為配置生成linux系統的應用程序。
{
"productName": "appName", "directories": { "output": "app-builds" },"files": [ "**/*", "!*.ts", "!*.code-workspace", "!LICENSE.md", "!package.json", "!package-lock.json", "!src/", "!e2e/", "!hooks/", "!.angular-cli.json", "!_config.yml", "!karma.conf.js", "!tsconfig.json", "!tslint.json", "!node_modules/*", "node_modules/electron-updater", "!window-rdg", "!windows-office", "!mac-rdg", "!mac-office", "!app-builds", "!apps" ], "win": { "icon": "dist/favicon.png", "target": [ "portable" ], "publish": [ { "provider":"generic", "url":"http://10.1.226.79:8889/download/win/" } ] }, "mac": { "icon": "dist", "target": [ "dmg" ], "publish": [ { "provider":"generic", "url":"http://10.1.226.79:8889/download/mac/" } ] }, "linux": { "icon": "dist", "target": [ "AppImage" ] } }
在配置打包的時候，electron-builder會默認把Chromium的內核都打包進去，還有源代碼。我們在開發應用程序的時候會通過webpack將源代碼進行打包和壓縮，生成dist目錄文件。打包后的文件是非常小的。大多數時候我們打包出來的應用程序會比較大達到200M到300M那么這個時候就需要對應用程序進行減小體積。
那么為什么應用程序會那么大呢，我們怎么找到原因。首先我們通過electron-builder命令進行應用程序打包，在應用程序目錄下會有win-unpacked/resources/app.asar文件，該文件就是我們應用程序的源代碼壓縮文件。我們通過npm install asar -g下載該插件，然后asar extract app.asar ./將app.asar源代碼解壓，就可以看到我們的應用程序具體包含了哪些文件夾。
找到根源后我們就比較好處理。首先在應用啟動的時候我們的配置如下：
win.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true,
}));
通過上面的代碼我們看到我們只需要dist目錄的文件，就像web端開發一樣他是整個應用程序的代碼，node_modules文件夾中的大部分庫我們是不需要的。為什么說大多數的呢，因為我們有可能在程序運行時依賴一些js庫，這些庫還是要打包進應用程序的中，electron-builder打包應用程序已經幫你都配置好，你只要將需要打包的庫放在package.json中的dependencies參數中，開發過node項目的同學都應該知道dependencies下放置的是生產環境程序運行時需要的js庫，devDependencies參數中放置的是開發環境需要的庫，所以我們將運行時的庫放到dependencies，其他的全部放在devDependencies中，這樣就可以大大縮小應用程序的體積，其余的零散的不需要的文件通過上面electron-builder.json文件中的files參數配置前面加上!<文件名>就可以將文件不打包進去。