electron package: reduce the package size

29
votes

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?

4
javascriptelectronelectron-packager
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) – Maxime Flament

4 Answers

22
votes

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.

16
votes

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

1
votes

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.

0
votes

I am using electron-builder to package the electron app.

  1. Do not include the node_modules in the build process.

Reference: https://github.com/electron-userland/electron-builder/issues/1911

Try to not include node_modules to your app.asar like the following. "build": { ... "files": [ "!node_modules" ], ... }

Implementing the above, we have package.json file:


  "build": {
    "appId": "org.jitsi.roundesk",
    "productName": "roundesk",
    "generateUpdatesFilesForAllChannels": true,
    "afterPack": "./linux-sandbox-fix.js",
    "files": [
      "**/*",
      "resources",
      "!app",
      "!main.js",
      "!node_modules"
    ],

Sample code link: https://github.com/jitsi/jitsi-meet-electron/blob/master/package.json

We get the following reduction in the app size as shown below. (In Mb) enter image description here