I've made a simple desktop app, using React, (with Vite), and Electron JS. I've checked the bundle size of the final files of only the React app, (the CSS, js and html), and it's as expected very very low.
Then I used Electron builder to do the packaging, selected to do it portable for Windows, but the size of the resulting application is crazy big compared to what the React bundle size is, it's 168MB, I don't know what to do to make it less. I've been searching on Electron and Electron builder documentation but I haven't gotten an answer, can anyone help me?
I tried optimizing the React app performance, which I did, yet nothing changes the size of the final executable made by Electron builder
package.json config:
{
"name": "venedolar-app",
"private": true,
"version": "1.0.0",
"description": "Monitor application that displays the currencies of Venezuela up to date",
"type": "module",
"main": "dist/electron.cjs",
"scripts": {
"dev": "vite",
"start": "electron .",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"author": "Gabriel Trujillo",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.69.5"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"electron": "^27.0.3",
"electron-builder": "^24.6.4",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
},
"build": {
"appId": "com.venedolar.app",
"productName": "Venedolar",
"copyright": "Copyright @ 2023 Gabriel Trujillo, Diego Peña",
"win": {
"icon": "dist/icon2.ico",
"target": [
"portable"
],
"artifactName": "Venedolar1.0_portable.exe"
},
"directories": {
"output": "build",
"buildResources": "dist"
},
"files": [
"dist/**/*"
]
}
}
A packaged app will always be bigger than your source code because it includes Electron binaries (Node.js and Chromium), which are about 150mb in size. You can only optimize the size of the resource folder, which is the part of your code you package.
According to your config, you don't only pack your bundled files:
"files": [
"dist/**/*",
"public/electron.cjs",
"node_modules/**/*",
"package.json"
]
When your files are bundled, you no longer need the node_modules folder, which will increase the size of your app. The ideal would be to have just that:
"files": [
"dist/**/*",
]
In your case, it means you should tell Vite to also bundle electron.cjs. I'm not familiar enough with this bundler, so I won't be able to give you a config for that.