electron-builder 打包分析
打包后的项目结构
查看一下electron-builder 打包后的目录结构：
主要项目文件
- app.asar
项目的代码进行打包后的文件。默认情况下会对我们的整个项目进行的打包
- electron.exe
应用的主程序，编译好的程序，运行 resource/app.asar 这个文件内所包含的项目代码
打包优化
直接打包的问题
- 体积大
- 暴露源码
优化方向
从项目目录结构中可以看出，electron.exe、app.asar 等文件是每个 Electron 应用都一样且必需的，因此我们可以优化的空间只是 app.asar 文件。
目前 app.asar 是将我们的项目整个打包，整个应用之所以大，原因在于 node_modules 文件夹特别大。因此我们要做的是我们的应用能否不打包 node_modules 文件夹，或者让需要打包的东西尽可能的少。
优化减少dependencies依赖项
需要打包 dependencies 中的依赖，是因为 electron 是直接运行我们的源码的，依赖引用的路径是从 node_modules 文件夹中查找。因此，优化应用程序的体积就需要减少打包的依赖数量，即减少 dependencies 中的依赖。
如何减少 dependencies 中依赖？
如果我们将代码进行打包，将需要使用到的依赖直接打包进最终的文件，那就可以不需要再将 node_modules 打包进应用程序了。并且通过打包一方面可以减少应用的体积，另一方面也可以对我们的代码进行混淆，避免暴露源码。
视图层代码打包
使用 webpack 进行一个简单的打包，新建 webpack.config.js
const path = require("path")
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, './build'),
filename: 'main.js'
}
}
需要注意的是，我们在使用 webpack 的时候，__dirname 会默认为根目录 /，但这并不是我们想要的结果，我们需要它的绝对路径，需要在导出项中再添加一项配置：
node: {
__dirname: false,
}
在 script 中添加命令如下：
"buildMain": "webpack"
执行 npm run buildMain，此时 build 文件下就会有一个 main.js 文件。
在对视图层的代码打包之后，只有视图层需要用的代码就不再需要打包进 node_modules 文件夹中了，最简单的方法就是在 package.json 文件中将这部分依赖从 dependencies 移动到 devDependencies ，electron-builder 不会将 dependencies 中的依赖打包应用程序
主进程（electron 层）代码打包
使用 webpack 对主进程的代码打包与普通页面的打包基本一致。需要注意的是 target 需要设置为 electron-main，在 webpack.config.js 文件的导出项中添加：
target: 'electron-main',
必须保留的 dependencies 依赖
执行完上面的步骤之后，删除 node_modules 文件重新打包，会发现 node_modules 文件还是会被打包进最终的应用中。这是因为 electron-builder 打包时也是在打包某个平台的版本时重新安装相应平台的依赖包，以此来实现 electron 跨平台。
双 package.json 项目结构
electron-builder 提供的另外一种方式帮助我们管理依赖，也就是双 package.json 项目结构。
- 在原本的项目下新建一个需要打包的文件夹
app。
如果项目下有app文件夹，electron-builder在打包时会以该文件夹为打包的根文件夹，就是只会打包该文件夹下的文件。配置中设置的需要打包的文件也是基于app文件来设置。
"build": {
"files": [
"build/**/*",
"node_modules/**/*",
"package.json"
]
},
则 webpack 进行打包时只会打包 build 、 node_modules 、 package.json 文件夹下的文件。
这个时候由于我们的入口文件已经变为了 build/main.js，如果 package.json还是执行 main.js 就会报错，那么就需要我们在 package.json 的 build 中添加一个选项，这个选项在 electron 中叫做 extraMetadata：
"extraMetadata": {
"main": "./build/main.js"
},
修改 script 中的命令
"script": {
...
"pack": "electron-builder --dir",
"prepack": "npm run build && npm run buildMain",
"dist": "electron-builder",
"predist": "npm run build && npm run buildMain",
},
}
执行 npm run dist 对我们的项目进行重新的打包，就可以看到项目的体积会有一个极大的优化。
