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参数配置前面加上!<文件名>就能够将文件不打包进去。