electron package: reduce the package size

Question

I made a simple Electron app:

main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

let win

function createWindow () {
  win = new BrowserWindow({
    width: 800, 
    height: 600, 
    icon: path.join(__dirname, 'icon.ico')
  })

  win.maximize();

  win.loadURL('https://stackoverflow.com/', {"extraHeaders" : "pragma: no-cache\n"});

  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)

app.on('browser-window-created',function(e,window) {
    window.setMenu(null);
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "main.js",
  "build": {
    "appId": "com.test.app",
    "copyright": "test",
    "productName": "test"
  },
  "devDependencies": {
    "electron": "1.7.9",
    "electron-builder": "^19.46.4",
    "electron-packager": "^10.1.0"
  }
}

with electron-packager i have builded the package to release:

electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds

the total size of the builded package is 107 MB.

Anyone have tips to reduce the size of the package?

Answer 1

Stumbled upon this question while trying to lower my app as well. I'm creating an app with just the plain old HTML, CSS, and JS so I think it contributed to how small mine is relative to those in here. I think another factor is that it's still a small app so I really can't say but from what I've noticed, my earlier versions were heavier and slowly, I tried optimizing the directories and files.

After modifying my packacge.json's files property as per Crefelder's answer, it now looks like this:

"files": [
    "!*",
    "!**/*",
    "main.js",
    "public/**/*"
],

The main.js is my entry point while all files in the public directory are those bundled and compiled via Laravel Mix (which uses webpack). All HTML are also located there.

Furthermore, I moved all my NPM packages to devDependencies, aside from the following:

"dependencies": {
    "@electron/remote": "^2.1.0",
    "electron-log": "^5.0.0",
    "electron-reloader": "^1.2.3",
    "electron-updater": "^5.3.0"
},

My devDependencies now looks like this since then:

"devDependencies": {
    "cross-env": "^7.0.3",
    "electron": "^23.2.0",
    "electron-builder": "^24.1.1",
    "laravel-mix": "^6.0.49",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.60.0",
    "sass-loader": "^13.2.1",
    "webpack": "^5.76.3",
    "webpack-cli": "^5.0.1",
    "@fortawesome/fontawesome-free": "^6.2.0",
    "@sweetalert2/theme-dark": "^5.0.15",
    "autoprefixer": "10.4.5",
    "bootstrap": "^5.3.1",
    "jquery": "^3.6.1",
    "jquery-ui": "^1.13.2",
    "jspdf": "^2.5.1",
    "normalize.css": "^8.0.1",
    "randexp": "^0.5.3",
    "semver": "^7.5.4",
    "sweetalert2": "^10.16.9",
    "textfit": "^2.4.0"
},

Following @Bobbyv231's answer, I managed to at least shred a good 90MB+.

My take away is if you have a compiler, you could ignore everything and instead, just declare all the necessary files such as the main entrypoint, all HTMLs, CSSs, and JavaScript files, along with your assets (images, fonts, etc.). Move all libraries you only need in dev to be in devDependencies and leave all the others that are required during runtime in dependencies, lowering the overall size of the application.

Answer 2

Had a problem with a to big portable app exe going to 740MB. Everyday I rebuild it was changing and I was very confused. (140MB, 340MB, 140MB, 740MB)

It is a Angular (16.0.5) Electron (25.1.0) build and I used this very helpfull template for it: https://github.com/maximegris/angular-electron/blob/main/electron-builder.json

The Angular dist build is around 80MB with all assets like music and videos.

After looking what happens I found out that the files in electron-builder.json are not really well defined in this template.

 "files": [
    "**/*",
    "!**/*.ts",
    "!*.map",
    "!package.json",
    "!package-lock.json",
    {
        "from": "../dist",
        "filter": ["**/*"]
    },

It is also copying all node_modules and the src folder including all assets and all the json and configs from root additionally.

I changed it like this, to specify only files that are needed:

"files": [
    "app/*.js*",
    "app/*/*.js*",
    "app-scripts/copy-config.js", <-- extra file that I needed
    "!**/*.ts",
    "main.js",
    {
        "from": "dist",
        "filter": ["**/*"],
        "to": "app"
    }
],

Now the portable app exe is 143MB not 740MB anymore.

The node_modules folder is not needed even if you use electron functions like:

import {app, BrowserWindow} from 'electron';
import {join, normalize, resolve} from 'path';
import {appendFile, existsSync, mkdirSync, readFile, readFileSync, writeFile} from 'fs';

Hope this is helpfull also for looking at this.

Answer 3

The Electron version is important for reducing the package size.

The minimum package size on Windows x64 without CEF recompiling:

• Electron v16.0.2 with Chromium v96 => 52.9MB

• Electron v3.1.13 with Chromium v66 => 32.4MB

You can choose your best version electron from here

How to reduce size again after version choosed:

1. Remove unused files for your cusomer, such as d3dcompiler_47.dll
2. Use a better compress algorithm, such as 7zip

All necessary files for Electron v3 packaging on Windows for example:

└─App
    │  App.exe
    │  content_shell.pak
    │  ffmpeg.dll
    │  icudtl.dat
    │  natives_blob.bin
    │  node.dll
    │  v8_context_snapshot.bin
    │
    ├─locales
    │      en-US.pak
    │
    └─resources
           App.asar
           electron.asar

Answer 4

I've run into the same issue with an app of 200MB. Managed to get it down to 176MB and finally 55MB.

Here's what I did (if it helps):

• Electron-builder: To package app
• Pruning: To clean up unused modules
• Cleaning up package.json file: dependencies

Packaging the App:

Note: I made a Windows application.

There's a two-step package.json method mentioned in the docs, but after trying myself (and confirming the docs) it's not needed.

Strangely enough for me what worked was deleted my entire 'Node Modules' folder, and running 'npm install' to bring everything back. Immediately after that, I ran 'npm prune' to clean out anything in the 'Node Modules' folder that isn't being used (even though I just ran 'npm install'). I also double-checked that neither electron nor electron-builder was in my 'dependencies' section in the package.json file. After this, I packaged the app/

As everyone probably already knows, With electron-builder, your 'dist' folder (unless you changed the default directory) should contain a .exe file directly in the 'dist' directory and an 'unpackaged' folder containing a .exe file which is contingent on the related files inside that same folder. However, the .exe file I have (the one that is directly within the 'dist' folder) is only 55MB. Although to be fair, this file does install the program and the size does inflate back to around 171MB once installed.

I Will post again if I can find another way to reduce the file size at all.

Answer 5

I managed to reduce the final size of my mac app from 250MB to 128MB by moving 'electron' and my reactJs dependencies to devDependencies in package.json ... since all I need is going to be in the final bundle.js

But sadly I couldn't get it any lower than that because the electron framework is 118MB which is something if you're making a small app, but I guess that's the price to pay for making cross-platform web apps

Answer 6

You can reduce the electron app size by packaging using electron-builder package.

PicArt is an electronjs app which I developed recently. It is built using reactJS. Initially when I packaged the app using electron-packager the Window's build size was around 98 MB. Then I found this awesome boilerplate electron-react where they configured the electron-builder to produced optimised build size. After using those configuration setup, PicArt's build is now around 36 MB.

Yes, it is possible to reduce the app size , but it quite painful and time consuming to configure the build setup.