Electron打包后大小优化

最终大小与electron版本相关，如下图

mac下打包为.app里的内容

整个包的大小基于就是 Frameworks + Resources 的大小

• Frameworks electron核心（大小174M，版本9.0.0）基本没有可以优化的空间

  有一个electron-boilerplate包，是精简化的electron，但已经3年没有更新，用的人也不多

• Resources app.asar主要是项目打包后的资源和主进程使用的node_modules，所以优化app.asar为主（win也是）

  app.asar中的内容

  package.json中没有区分哪些依赖是主进程的，所以需要使用双package.json

双package.json

electron-builder支持双package.json，用法：

1. 根目录添加 app 文件夹，其下添加 package.json 文件。

   这时electron-builder打包时读取 app/package.json 配置

   {
       "name": "应用名",
       "version": "0.1.0",
       "private": true,
       "main": "./bundled/background.js",  // => 项目根目录/app/bundled
       "dependencies": {                   // 主进程使用的依赖
           "sequelize": "^6.3.5",
           "sqlite3": "^4.2.0" 
       } 
   }
   

2. 修改打包输出路径。使用app后，打包时仅访问此文件夹，所以需要将项目output到app里（默认为dist）

   // vue.config.js
   ...
     outputDir: 'app/bundled',
   ...
   
   // pack.config.js or 根package.json
   ...
     // 指定了就出不来了，官网的解释是：No need to specify which files to include in the app
     // files: ['bundled/*'],  
   ...
   directories: {
       output: 'release',  // =>根/release 不要放在app内，app下所有文件都会打进去
   },
   ...
   

以上配置打包后，Resources app.asar 为38M，整体包缩小近100M。

参考electron-builder官网

安装npm全局asar包，asar extract app.asar ./temp可解压asar查看里面的内容