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?

Novelistic

Did you take a look at: github.com/electron/electron/issues/2003 ? Contributors to electron projects say that it's the expected size, because windows adds a copy of Git to the app, and also, you'll have some parts of Chrome in your application making it huge for no visible reasons. If you're planning on distributing your application over the internet, I'd highly recommand you to zip your application before allowing downloads. See: digitalocean.com/community/tutorials/… (Nginx tutorial) – Elasticize

Answer 1

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.

Diaphony

I am using Vue with electron, so is there equivalence boilderplate for Vue? – Uraemia

@K.Symbol yes. you can find it here – Diaphony

Yeah, one month before when I started building my app I considered it, but I finally choosed the nklayman.github.io/vue-cli-plugin-electron-builder. The packaged .exe is 93.1MB, and 60MB after zipping, now I think acceptable. – Uraemia

That's an awesome boilerplate. Is there one that doesn't have so much custom code in it? Something more bare bones. – Hialeah

Answer 2

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

Smack

Answer 3

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.

Headmost

that is because the portable exe or the setup exe just zips the whole folder for you. so zipping it yourself would have the same effect. the electron folder itself stays the same 200mb+ (electron 23) – Multifoil

Answer 4

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

Outfall

Can you detail how you came to the understanding that only those files are needed? – Singleton

Answer 5

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.

Lansquenet

Answer 6

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 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)[https://mcmap.net/q/365060/-electron-package-reduce-the-package-size], I managed to at least shred a good 90MB+

Chairmanship