Electron-builder打包應用程序策略

咱們經過Electron框架開發客戶端，在打包應用程序時經過electron-builder插件來打包應用程序會相對簡單。

一、首先經過npm install electron-builder --save下載該插件

二、下載完成後在跟目錄新建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參數配置前面加上!<文件名>就能夠將文件不打包進去。