Migrating to Deno to Reduce Electron App Build Size

Computing/Software3 min read

TuBrief Editorial Written with AI assistance from the source video. The video is the authority. Source video: Deno Desktop Can Make Your Apps 70% Smaller · Better Stack

Saying Goodbye to Massive Distribution Files

Bundling hundreds of megabytes of Chromium binaries every time you run an Electron app is inefficient. For a solo developer, the size of the distribution file is directly linked to installation rates. Deno Desktop uses the operating system's native webview. You can reduce an existing 180MB app to the 19MB level. This is not just a simple technical change, but an effort to lighten the burden of the operating environment.

Migration Sprint Checklist

To finish refactoring within 10 days, you must discard the existing structure.

  • Simplify the cache management system by using deno.lock instead of the complex dependencies in package.json.
  • Remove heavy tools like electron-builder and asar, and set up Deno's internal build engine.
  • Delete the ipcMain and ipcRenderer communication layers and consolidate process control with the win.bind() method.

Once this work is finished, you can shorten the build process time by 40%.

Controlling Webview Differences by Platform

Mac, Windows, and Linux have different web engines. WKWebView and WebView2 produce different rendering results. Even the way they interpret CSS specifications differs. In particular, Linux's legacy WebKitGTK frequently breaks layouts.

To reduce the sense of inconsistency across platforms, you must include correction scripts in your deployment pipeline.

  1. Use CSS reset code to force default margins to 0 in all browsers.
  2. Call bindings.getPlatformMetadata() during the bootstrap phase to identify the running operating system.
  3. On macOS, secure a 28px-high margin with a wrapper div considering the traffic light area in frameless mode, and for Windows, inject CSS classes based on whether dark mode is detected.

Applying this method reduces the cost of manually modifying the UI for every operating system.

Implementing Secure Wrappers for Native API Calls

Electron's IPC channels are prone to frequent security incidents. Deno Desktop improves security by delivering data through direct binding. To control OS functions safely, you must implement wrapper classes yourself.

  • Limit file I/O strictly within the sandbox path, /app_sandbox_storage.
  • Include Path Traversal prevention logic in class constructors to immediately block ".." characters in paths.
  • When calling system functions like notifications, verify that the passed resource is on the whitelist and use only base64-encoded data.

Automating Deployment with GitHub Actions

Do not build by setting up environments for each OS separately. By using GitHub Actions' matrix strategy, you can generate Windows msi, Linux AppImage, and Mac dmg files simultaneously with a single commit.

  • Build Windows and Linux in the ubuntu-latest environment, and Mac binaries on macos-14.
  • Add the --compress=xz option to the deno desktop --target command to reduce the final file size.
  • For Linux output, run xvfb-run to test whether it actually runs in a virtual environment.

Building this pipeline makes your deployment cycle twice as fast as manual builds. Migrating to Deno offers two major benefits: lightweight binaries and sandbox security.

Related Video

Deno Desktop Can Make Your Apps 70% Smaller

Better Stack6:17

More from the community

Comments

Log in to leave a comment.

No comments yet.