Electron-builder: How to remove `app.asar.unpacked` from `.app` file

[jzj1993]

• Version: 20.38.4

• Target: macOS arch=x64

I'm using electron-vue to build my application. After I build release with electron-builder for macOS, I found the output files are too large. The .app file is about 250MB, and the DMG file is about 100MB.

Then I found that my-project.app/Contents/Resources/app.asar.unpacked/node_modules/electron directory takes up a lot of storage. If I delete the app.asar.unpacked directory from the .app file manually and then start the application, everything looks fine. When I build release using electron-webpack-quick-start, there is no app.asar.unpacked directory in the .app file. The .app file size is about 125MB and the DMG file is about 50MB.

I have read the configuration document of electron-builder. But I still don't know if this is a bug of electron-builder or it is because of the project configuration.

Here is the steps to reproduce my problem (running on macOS):

npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
# select electron-builder as build tool

cd my-project
yarn
yarn build

And the package.json configuration for electron-build is as follows:

{
  "scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": ""
  },
  "build": {
    "productName": "my-project",
    "appId": "com.example.yourapp",
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/icon.ico"
    },
    "linux": {
      "icon": "build/icons"
    }
  }


}

[jzj1993]

I think I have solved this problem by adding configurations to exclude electron. Because vuex-electron has declared dependency of electron. But I think maybe electron-builder should exclude node_modules/electron by default ?

{
  "build": {
    "files": [
      "!node_modules/electron/**/*"
    ],
  }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.