Electron-builder打包应用程序策略

我们通过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参数配置前面加上!<文件名>就可以将文件不打包进去。