Migrasi ke Deno untuk Mengurangi Ukuran Build Aplikasi Electron

Selamat Tinggal pada File Distribusi yang Raksasa

Mendistribusikan biner Chromium berukuran ratusan megabyte setiap kali menjalankan aplikasi Electron adalah hal yang tidak efisien. Bagi pengembang solo, ukuran file distribusi berkaitan langsung dengan tingkat instalasi. Deno Desktop menggunakan webview bawaan sistem operasi. Anda dapat mengurangi ukuran aplikasi yang tadinya 180MB menjadi 19MB. Ini bukan sekadar perubahan teknis, melainkan upaya untuk meringankan beban lingkungan operasional.

Daftar Periksa Sprint Migrasi

Untuk menyelesaikan refaktorisasi dalam 10 hari, Anda harus meninggalkan struktur lama.

Gunakan deno.lock untuk menyederhanakan sistem manajemen cache, alih-alih ketergantungan yang rumit di package.json.
Hapus alat berat seperti Electron Builder dan asar, lalu atur mesin build internal Deno.
Hapus layer komunikasi ipcMain dan ipcRenderer, lalu integrasikan kontrol proses dengan metode win.bind().

Setelah menyelesaikan tugas ini, Anda dapat memangkas waktu proses build hingga 40%.

Mengendalikan Perbedaan Webview antar Platform

Mac, Windows, dan Linux memiliki mesin web yang berbeda. WKWebView dan WebView2 memiliki hasil rendering yang berbeda-beda. Bahkan cara mereka menginterpretasikan spesifikasi CSS pun berbeda. Terutama WebKitGTK versi lama di Linux sering kali merusak tata letak.

Untuk mengurangi perbedaan antar platform, Anda harus menyertakan skrip koreksi ke dalam jalur distribusi (deployment pipeline).

Gunakan kode reset CSS untuk memaksa margin default semua peramban menjadi 0.
Panggil bindings.getPlatformMetadata() pada tahap bootstrap untuk menentukan sistem operasi yang sedang berjalan.
Di macOS, siapkan margin setinggi 28px dengan pembungkus div saat dalam mode frameless dengan mempertimbangkan area lampu lalu lintas, dan suntikkan kelas CSS di Windows tergantung pada apakah mode gelap terdeteksi atau tidak.

Dengan menerapkan metode ini, biaya untuk memperbaiki UI satu per satu di setiap sistem operasi akan berkurang.

Implementasi Wrapper Keamanan Panggilan API Native

Kanal IPC pada Electron sering kali mengalami masalah keamanan. Deno Desktop meningkatkan keamanan dengan mengirimkan data melalui binding langsung. Untuk mengendalikan fungsi OS secara aman, Anda harus mengimplementasikan kelas wrapper secara mandiri.

Batasi input/output file hanya di dalam jalur sandbox, yaitu /app_sandbox_storage.
Sertakan logika pencegahan Path Traversal di konstruktor kelas untuk langsung memblokir karakter .. di dalam jalur.
Saat memanggil fungsi sistem seperti notifikasi, pastikan sumber daya yang dikirimkan sebagai argumen ada di dalam whitelist dan hanya gunakan data yang di-encode dalam base64.

Otomatisasi Distribusi dengan GitHub Actions

Jangan melakukan build sambil mengatur lingkungan untuk setiap OS. Jika Anda menggunakan strategi matrix di GitHub Actions, Anda dapat mengeluarkan file Windows msi, Linux AppImage, dan Mac dmg secara bersamaan hanya dengan satu komit.

Build Windows dan Linux di lingkungan ubuntu-latest, dan biner Mac di macos-14.
Tambahkan opsi --compress=xz ke perintah deno desktop --target untuk mengurangi ukuran file akhir.
Uji apakah hasil build Linux benar-benar berjalan di lingkungan virtual dengan menjalankan xvfb-run.

Dengan membangun pipeline ini, siklus distribusi akan 2 kali lebih cepat dibandingkan build manual. Peralihan ke Deno memberikan dua keuntungan: biner yang ringan dan keamanan sandbox.