Make electron app smaller?

Question

I just recently built an electron app and packaged it using electron-packager. The .exe file is 55,000kb and the rest of the folder is quite bulky as well. Is there any way to take down the size of this application at all?

Alper

Answer 1

Here's a github issue on it.

The comment I'm emphasizing is:

That's the expected size, there is no way to make it smaller.

The reason why it's so big is because electron is loading most of chromium inside that 50mb file.

So no unfortunately there is no way to make it smaller sorry.

Mayberry

And now it's 100MB :) – Ceria

for me it's 200M – Luigi

Answer 2

A somewhat helpful post from that github thread suggests removing unnecessary node modules via electron-packager. It also offers a bit more explanation on why files are so large.

You can zip your app and if you're using electron-packager you can ignore some node modules that you don't need when the app is running, this makes it a bit smaller. For instance I have a 37MB zipped Electron app (Note Windows version is much larger as it contains a copy of Git). But Electron will always have a large part of Chrome in it so there is only so much that can be done. Electron itself right now is ~33MB.

Eventuality

note that more recent electron version, 37MB is no more realistic (because of embedded chromium imho) – Shrunk

Answer 3

There is a way to reduce Electron size drastically (up to 99%, depending how big is your app), by using native browser, available in each OS, instead of loading webkit. BUT as built in browsers don't have the system API's, you will also be drastically limited in what you can do. But, if you need basic web ui app, this might be the best solution out there, though, it must be mentioned, that it might have some unexpected issues, as you will need to test your app on different OS'es browsers..

The method i'm talking about is available in awesome post Put your Electron app on a diet with Electrino by Pauli Olavi Ojala

Abm

Why don't you just use html+cs+js combo (unless you want to hide your code)? I have read the post and it says it lacks the Electron-specific API - so I guess you cannot interact with your OS (saving/reading files) etc. So your post suggest using something harder to use without it's benefits (portability, connection with OS). – Medieval

you can go directly to project github.com/pojala/electrino (2024: this project suffer of some issues, and last commit was in 2020) anyway a good hint for this size issue! thanks – Shrunk

Answer 4

If you are using Electron Builder https://www.electron.build you should use the various methods listed to remove files and folders for specific platforms.

Example

{
    "name": "Example",
    "version": "1.1.2",
    "description": "",
    "main": "main.js",
    "scripts": {},
    "build": {
        "appId": "com.example",
        "afterSign": "notarize.js",
        "fileAssociations": [{
            "ext": [
                "mp4"
            ],
            "name": "Media File",
            "role": "Viewer"
        }],
        "dmg": {
            "sign": true
        },
        "mac": {
            "hardenedRuntime": true,
            "gatekeeperAssess": false,
            "entitlements": "build/entitlements.mac.plist",
            "entitlementsInherit": "build/entitlements.mac.plist",
            "icon": "build/icon.png",
            "category": "public.app-category.video",
            "extraFiles": [{
                    "from": "resources/bin/mac",
                    "to": "Resources/bin/mac",
                    "filter": [
                        "**/*"
                    ]
                },
                {
                    "from": "node_modules/platforms/darwin-x64/bin",
                    "to": "Resources/bin/mac",
                    "filter": [
                        "**/*"
                    ]
                }
            ],
            "files": [
                "!gruntfile.js",
                "!README.md",
                "!notarize.js",
                "!.env",
                "!minify.js",
                "!src/*",
                "!.git/*",
                "!resources/*"
            ]
        },
        "win": {
            "target": "nsis",
            "signingHashAlgorithms": [
                "sha1"
            ],
            "certificateFile": "",
            "certificatePassword": "",
            "files": [
                "!gruntfile.js",
                "!README.md",
                "!notarize.js",
                "!.env",
                "!minify.js",
                "!.git/*",
                "!resources/mac/*"
            ]
        }
    },
    "author": "Example",
    "license": "ISC",
    "devDependencies": {

    },
    "dependencies": {

    }
}

Leisurely