Beberapa hari yang lalu ketika saya menyelesaikan project IPTV Desktop yang saya buat. Saya kembali menyadari satu hal yang membuat electron kurang saya sukai, ukuran dari bundle aplikasinya. Installer aplikasi electron biasanya berukuran lebih dari 100 MB dan ketika sudah diinstall akan menggunakan lebih dari 200 MB penyimpanan. Bahkan untuk sekedar "Hello World" saja mungkin juga akan menghasilkan ukuran sedemikian besarnya.
Penyebab Besarnya Ukuran Aplikasi Electron
Aplikasi electron memiliki ukuran yang sangat besar tidak lain dan tidak bukan karena Electron memasukkan Chromium dan NodeJS ke dalam bundle aplikasi yang kita buat. Hal ini agar aplikasi dapat menjalankan kode javascript di bagian core atau backend dan menampilkan kode HTML, CSS dan JavaScript di bagian depan atau frontend nya.
Mengeidentifikasi Penyebab Ukuran Bundle Besar
Jika kita membuat aplikasi menggunakan electron vite, maka otomatis akan menggunakan electron builder untuk memanage build aplikasi ke production dan melakukan generate installernya.
Saat kita menjalankan perintah untuk membuild aplikasi kita, maka electron builder akan menghasilkan beberapa file dan folder di folder dist. Disini kita akan mendapatkan folder dengan suffix -unpacked. Misalnya jika saya menggunakan linux akan mendapatkan folder dengan nama linux-unpacked. Disini lah berkas-berkas yang dimasukan ke dalam installer dan akan dimasukan ke komputer user. Bundle dari kode HTML, CSS dan JavaScript yang kita buat akan dimasukkan kedalam file app.asar di folder resources.
File .asar adalah hasil kompresi dari beberapa file, untuk melihat isinya kita akan menggunakan bantuan package asar dari electron:
Jalankan package tersebut didalam folder yang berisikan app.asar dengan npx atau pnpm dlx:
pnpm dlx @electron/asar extract app.asar ~/direktori-ekstrak Perintah tersebut akan mengekstrak app.asar ke folder ~/direktori-ekstrak (~ berarti home directory user saat ini pada linux dan MacOS).
Coba buka folder hasil ekstrak tersebut, kita akan mengetahui file atau folder mana yang menyebabkan ukuran bundle aplikasi kita besar.
Package Yang Masih Dibundle di node_modules
Ketika kita melakukan bundle aplikasi kita ke mode production, package-package frontend kita seperti react, lit, vue dan library lain yang kita gunakan di frontend seperti lucide icon, hls.js, redux, dll seharusnya sudah tidak kita gunakan ketika menjalankan aplikasi di production. Hal ini karena bundler kita (rollup atau webpack) sudah menggabungkan package tersebut menjadi satu dengan aplikasi kita (akan berada di folder out/renderer secara default di project electron vite).
Namun, ketika saya membuild aplikasi IPTV Desktop saya ternyata package-package frontend yang saya gunakan masih terbundle ke folder node_modules di dalam app.asar. Lalu bagaimana cara mengatasinya? Saya memindahkan dependensi library-library frontend saya dari "dependencies" ke "devDependencies" di file package.json. Setelah itu saya lakukan pnpm install dan coba lakukan build lagi dan hasilnya library yang saya gunakan di frontend sudah tidak terbundle lagi oleh rollup. Namun, jangan pindahkan library yang anda gunakan di proses main / core aplikasi anda ke dev dependency! Kecuali anda mengatur rollup untuk membundlenya juga ke hasil build proses main anda (yang secara default tidak dilakukan oleh boilerplate electron vite).
Menggunakan Minifying
Ketika anda membuka file js hasil build vite di folder out/renderer secara default tidak akan melalui proses minifying. Dalam arti, spasi, tab, enter dan komentar akan tetap seperti demikian, tidak akan dihapus atau dipersingkat kodenya. Disinilah proses minifying berguna. Dengan melakukan minify kode yang dihasilkan ukurannya akan lebih kecil. Anda dapat membaca dokumentasi dari vite untuk pengaturan selengkapnya:
Disini saya menggunakan terser untuk minifying, jadi saya menginstall package tersebut ke dev dependency:
pnpm add -D terser Lalu ubah file pengaturan vite (electron.vite.config.ts) di bagian renderer atur minify menjadi terser di mode production:
export default defineConfig(({ mode }) => ({
// Other Config
renderer: {
build: {
minify: mode === 'production' ? 'terser' : false
}
}
}));
Anda juga dapat mengatur css minifying menggunakan lightningcss, silahkan baca di link build options vite yang sudah saya berikan diatas.
Di project ini saya menggunakan LitElement, jadi saya juga menambahkan beberapa plugin untuk minify sesuai dokumentasi dari lit. Sesuaikan ini dengan framework front-end yang anda gunakan.
Menghapus Resource Lokalisasi Chromium
Menghapus resource lokalisasi chromium berguna jika anda tidak memerlukan fungsi lokalisasi dari javascript (fungsi untuk format tanggal, waktu, currency, dsb) atau hanya menggunakan satu lokal saja. Anda dapat mengatur opsi "electronLanguages" di konfigurasi electron builder (electron-builder.yml) menjadi lokal yang akan kita gunakan saja. Contohnya saya hanya akan menggunakan lokal English-US:
electronLanguages: ['en-US'] Lalu anda juga harus memastikan chromium akan menggunakan lokal tersebut dengan menambahkan CLI Flag ke entrypoint aplikasi kita dibagian paling atas (file main/index.ts):
app.commandLine.appendSwitch('lang', 'en-US'); Lalu coba build ulang aplikasi electron kita ke production dan coba lihat di folder dist/***-unpacked/locales, pastikan hanya ada lokal yang akan kita gunakan saja.
Kesimpulan
Dengan menggunakan metode-metode diatas saya berhasil mengurangi ukuran installer aplikasi yang saya buat dari awalnya lebih dari 100 MB menjadi hanya sekitar 70 MB. Anda juga dapat melakukan optimalisasi lain sesuai dengan library yang anda gunakan. Tetapi ukurannya akan tetap tidak akan dapat sekecil aplikasi yang dibuat secara native. Hal ini karena di electron akan tetap membundle chromium yang ukurannya cukup besar. Anda dapat melihat contoh aplikasi yang saya buat dengan electron vite sebagai referensi:
