43

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?

ar099968
  • 6,963
  • 12
  • 64
  • 127
  • 2
    Did you take a look at: https://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: https://www.digitalocean.com/community/tutorials/how-to-add-the-gzip-module-to-nginx-on-ubuntu-16-04 (Nginx tutorial) – Maxime Flament Dec 01 '17 at 16:31

5 Answers5

29

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.

Bharathvaj Ganesan
  • 3,054
  • 1
  • 18
  • 32
  • 1
    I am using Vue with electron, so is there equivalence boilderplate for Vue? – K. Symbol Jul 10 '19 at 09:17
  • 2
    @K.Symbol yes. you can find it [here](https://github.com/SimulatedGREG/electron-vue) – Bharathvaj Ganesan Jul 10 '19 at 16:47
  • 1
    Yeah, one month before when I started building my app I considered it, but I finally choosed the https://nklayman.github.io/vue-cli-plugin-electron-builder/. The packaged .exe is 93.1MB, and 60MB after zipping, now I think acceptable. – K. Symbol Jul 11 '19 at 02:10
  • That's an awesome boilerplate. Is there one that doesn't have so much custom code in it? Something more bare bones. – Justin Mar 27 '22 at 06:56
20

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

Sodj
  • 846
  • 11
  • 18
5

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.

Alyson Maia
  • 802
  • 5
  • 14
Bobbyv231
  • 51
  • 1
  • 2
  • 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) – Welcor Mar 14 '23 at 18:14
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
BaiJiFeiLong
  • 3,716
  • 1
  • 30
  • 28
1

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.

Crefelder
  • 11
  • 1