Скачать или смотреть Optimizing Your Electron JS Application Size

Discover effective strategies to optimize the size of your `Electron JS` application, streamlining your desktop app without compromising functionality.
---
This video is based on the question https://stackoverflow.com/q/77497133/ asked by the user 'Gab' ( https://stackoverflow.com/u/22929818/ ) and on the answer https://stackoverflow.com/a/77499682/ provided by the user 'Arkellys' ( https://stackoverflow.com/u/9718056/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, comments, revision history etc. For example, the original title of the Question was: How can I optimize an Electron JS application size?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Optimizing Your Electron JS Application Size: A Comprehensive Guide

Creating a desktop application using Electron JS and React can be an exciting yet challenging experience. One common frustration developers face is the considerable increase in application size after packaging. In this post, we'll address a pressing question: How can I optimize an Electron JS application size?

Understanding the Problem

When you create a desktop application using Electron, the size of the final bundled application tends to be significantly larger than the original React application files. For instance, a developer found that their Electron-built application was a whopping 168MB compared to the minimal size of their React app. This size bloat often leaves developers puzzled, especially when they have already optimized their React application performance.

Why is the Application Size So Big?

The main reason for this excessive size lies in the fact that when you package your Electron application, it includes the Electron binaries along with your app's files. On Windows, these binaries can add roughly 150MB to your application size right off the bat. Here's a breakdown of what contributes to the size:

Key Contributors to Application Size

Electron Binaries: The core framework needed to run your application.

Node Modules: Unused libraries and modules that may not be necessary in the production build.

Additional Resources: Files and directories that can be optimized or excluded.

Steps to Optimize the Application Size

To significantly reduce the size of your Electron application, there are specific steps you can take. We'll break them down into organized sections for clarity.

1. Review Your Packaging Configuration

One of the first steps is to review your package.json configuration. Given the provided configuration, the following section specifies files to be included in the package:

[[See Video to Reveal this Text or Code Snippet]]

You don't need to include unnecessary directories or files. Focus on only including what’s necessary, which should primarily be the bundled files.

Updated Configuration Example:

[[See Video to Reveal this Text or Code Snippet]]

2. Exclude node_modules

Including the node_modules folder in your build will inflate your application size dramatically. Once your application is bundled, this folder should no longer be part of the packaged files. Make sure your configuration excludes this folder to keep the size under control.

3. Bundle All Necessary Files

In addition, ensure that all relevant files, particularly your entry point (in this case, electron.cjs), are being bundled correctly by your build tool, Vite. However, additional setup may be needed to accomplish this as it’s specialized for your use case.

4. Utilize Code Splitting and Lazy Loading

If your application has a considerable code base, consider implementing code splitting and lazy loading techniques. This means only loading the code necessary for the current view or functionality while deferring the loading of other modules until they're needed.

5. Compress Assets

Compress images and other assets to minimize their size without sacrificing quality. Tools such as ImageOptim or TinyPNG can help reduce the size of images significantly.

Conclusion

Optimizing the size of your Electron JS application is crucial for improving user experience and making your app more manageable. By carefully reviewing your configuration, excluding unnecessary files, and adopting strategies like lazy loading, you can effectively minimize the application size.

In essence, while Electron inherently adds size, much of the bloat can be addressed by focusing on what you include in your package. Take the time to revise your configuration, and your users will thank yo