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