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?

Solution 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.

Solution 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

Solution 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.

Solution 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

View more solutions

Comments

[K. Symbol]

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

[Bharathvaj Ganesan]

@K.Symbol yes. you can find it here

[K. Symbol]

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.

[Justin]

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