How can I optimize an Electron JS application size?

Question

I've made a simple desktop app, using React, (with Vite), and Electron JS. I've checked the bundle size of the final files of only the React app, (the CSS, js and html), and it's as expected very very low.

Then I used Electron builder to do the packaging, selected to do it portable for Windows, but the size of the resulting application is crazy big compared to what the React bundle size is, it's 168MB, I don't know what to do to make it less. I've been searching on Electron and Electron builder documentation but I haven't gotten an answer, can anyone help me?

I tried optimizing the React app performance, which I did, yet nothing changes the size of the final executable made by Electron builder

package.json config:

{
  "name": "venedolar-app",
  "private": true,
  "version": "1.0.0",
  "description": "Monitor application that displays the currencies of Venezuela up to date",
  "type": "module",
  "main": "dist/electron.cjs",
  "scripts": {
    "dev": "vite",
    "start": "electron .",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "author": "Gabriel Trujillo",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.69.5"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "electron": "^27.0.3",
    "electron-builder": "^24.6.4",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  },
  "build": {
    "appId": "com.venedolar.app",
    "productName": "Venedolar",
    "copyright": "Copyright @ 2023 Gabriel Trujillo, Diego Peña",
    "win": {
      "icon": "dist/icon2.ico",
      "target": [
        "portable"
      ],
      "artifactName": "Venedolar1.0_portable.exe"
    },
    "directories": {
      "output": "build",
      "buildResources": "dist"
    },
    "files": [
      "dist/**/*"
    ]
  }
}

Arkellys · Accepted Answer · 2024-08-16 05:48:47Z

0

A packaged app will always be bigger than your source code because it includes Electron binaries (Node.js and Chromium), which are about 150mb in size. You can only optimize the size of the resource folder, which is the part of your code you package.

According to your config, you don't only pack your bundled files:

"files": [
  "dist/**/*",
  "public/electron.cjs",
  "node_modules/**/*",
  "package.json"
]

When your files are bundled, you no longer need the node_modules folder, which will increase the size of your app. The ideal would be to have just that:

"files": [
  "dist/**/*",
]

In your case, it means you should tell Vite to also bundle electron.cjs. I'm not familiar enough with this bundler, so I won't be able to give you a config for that.

edited Aug 16, 2024 at 5:48

answered Nov 17, 2023 at 6:20

Arkellys

8,0384 gold badges23 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gab Over a year ago

Hi again, i've tried it, but still the same output, the result it's the artifact that has a size of 68mb, and inside the win_unpacked folder, an application that has a size of 168mb again, i added the whole package.json config already

Arkellys Over a year ago

@Gab 68mb for the .exe installer and 168mb for the app .exe sounds normal to me. Don't forget your app comes with chromium, it will not fit in 5mb. The min size is usually ~150mb, you can only optimize the size of the resource folder. I will edit my answer to include these information.

Arkellys Over a year ago

If the size didn't change when your removed node_modules, then maybe they where already removed somehow, you can check what's packaged by checking inside app.asar (you can temporarily disable asar in your config for that).

Gab Over a year ago

understood, thanks for the help, i tried thing and it came down to 1mb less lmao, but at least it's something, how do i check the app.asar?

Arkellys Over a year ago

@Gab if you disable asar you can see what's packaged: asar: false (but only do this to check, keep asar enabled for prod).

Collectives™ on Stack Overflow

How can I optimize an Electron JS application size?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related