[Performance] Reduce Desktop size

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

What performance issue do we need to solve?

Desktop app: large installer file size (326 MB)
Desktop app: taking a lot of space after a fresh install (812 MB)

What is the impact of this on end-users?

Faster app download and install
Users might be reluctant to install a large desktop app

List any benchmarks that show the severity of the issue

App installer size: 326MB
Slack installer size: 90MB (Also uses Electron / Chromium)
Chrome installer size: 1MB

Proposed solution (if any)

Research ways to reduce the installer size
For example Chrome's installer is so small because it downloads more data as part of the installation process

Research Electron documentation on ways to reduce size

List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)

Note: These should be the same as the benchmarks collected before any changes.

Platform:

Where is this issue occurring?

⚠️ Desktop App

Version Number: 1.1.24-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
#expensify-open-source: https://expensify.slack.com/archives/C01GTK53T8Q/p1640642055143300

View all open jobs on Upwork

@marcaaron

Triggered auto assignment to @marcaaron (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

@mallenexpensify

This issue was requested by @mallenexpensify: https://expensify.slack.com/archives/C01GTK53T8Q/p1640735769186600?thread_ts=1640642055.143300&cid=C01GTK53T8Q

This article seems helpful https://medium.com/gowombat/how-to-reduce-the-size-of-an-electron-app-installer-a2bc88a37732

I don't think we should go the chrome route. Either we make the app smaller or we don't, making the installer seem small is not worth it IMO.

Thanks for the investigation! Just my opinion, but doesn't seem super high priority considering contributors and Expensify staff are the main users of the desktop app at the moment and large installer sizes are not likely to inhibit anyone motivated to install and use the app. I would recommend we wait until there are more usage statistics to address the problem of a large installer. Just my 2 cents though - will leave this open and let others share their thoughts.

@mallenexpensify

Triggered auto assignment to @mallenexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

Found another improvement - we're double adding the compiled app which is another 2x size bump

This config rule adds the dist folder to the desktop package

App/config/electron.config.js

Lines 25 to 26 in b93c6d3

    
           files: [ 
        
               './dist/**/*',

But by default dist is also what electron uses to build the desktop package, and while building it adds temporary stuff to it
This temporary stuff gets added to the package because we're telling Electron to put everything from dist in the package

Let's see what's actually packed in App:

- note: this is App after the node_modules fix, Content used to be 800+ MB before

Frameworks (180MB) - can't really do anything about this it's mostly electron

Resources (213 MB) on the other hand is where our bundle is

Let's see what's inside this `app.asar` archive

This is evidence of the dist/mac folder getting packed in - we don't need that

Electron using the output folder (dist) for a temporary build which we unintentionally add to the package and this is worth another 180MB

End result of fixing this is the installer becomes 88MB

installer 88 MB (Download: New Expensify-1.1.33-3.dmg)
installed size 210MB

I've provided a link - you can see for yourself that the app is working same as before but it's 4x less size

It's easy to fix this by specifying an output directory for Electron

diff --git a/config/electron.config.js b/config/electron.config.js
--- a/config/electron.config.js	(revision d59aa4f750ba847843aee64d4c5a2bbf4ded3528)
+++ b/config/electron.config.js	(date 1643385656801)
@@ -27,4 +28,7 @@
         './desktop/*.js',
         './src/libs/checkForUpdates.js',
     ],
+    directories: {
+        output: 'desktop-build',
+    },
 };

Note on architectures

I don't know how the app is built and distributed. From package.json and electron.config.js I see an arch is not specified - when not specified it would be the arch of the current computer (x64 Intel mac?)

Here's the result from building the `x64` (same as the one shared in the previous post)

This works perfectly fine on my M1 mac, though it's emulated through Rosetta

A `arm64` app is about the same size and works without emulation

And finally there's the option to build an Universal app that works on both architectures, but takes 2x the size

Architectures and sizes

folders are unpacked apps
.dmgs are installer sizes

Nice! Thanks for the explanations!!
Let's get those changes in.
As for the platform, I would think it makes the most sense to build for the 2 different architectures and then somehow detect them when downloading them, so you always download the correct one.

@iwiznia

@iwiznia
I think others might be confused as well when all of the sudden dependencies become devDependencies, shouldn't we prepare for that with a slack comment or something?

It might be a good idea to update documentation so that we don't make the same mistake when new packages are installed
They should be installed in devDependencies otherwise they'll again get packed in vain

Posted a thread on slack: https://expensify.slack.com/archives/C01GTK53T8Q/p1643645168448979

We decided to go in another direction and create a 2nd package.json for the ./desktop app
This way we can isolate dependencies there
It's know as the Two package.json Structure

Pull Request is ready for review: #7744

There's another way to make the Desktop app much smaller

By making web comply with Progressive Web App (PWA) standards, Chrome would allow you to install the website as a Desktop App: https://caniuse.com/web-app-manifest

By default the app is kept up to date the same way a website is - when you launch/refresh you see the updated version

Expensify.PWA.mp4

Installing and removing the app

Expensify.PWA.installing.mp4

About 200 line changes were necessary to achieve what's presented in the video

draft: Expensify PWA app #8182
30 for web pack config
100 to have the "install" option in the download links section
75 for a custom status bar

@kidroca

@kidroca, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

@kidroca

@kidroca you were able to reduce the desktop size some, right? Can you provide a quick update for auditing purposes (or... let me know if you think it should be reopened)

@mallenexpensify

@mallenexpensify
It's ok to close this one, the work was done quite some time ago
I've posted some other options here and on slack and was waiting in case they get picked up, but they didn't

Summary

	Before	After
Installer size (dmg)	326 MB	86 MB
Installed app size	812 MB	187 MB

@kidroca

@kidroca were we able to reduce the size at all? Are the After #s where we're currently at or where we could be?

Sorry for the confusion. The size is considerably reduced - "after" is the result of this ticket and the current size of the desktop app

What I'm demoing here is removing the desktop app entirely and make the web app inatallable as PWA (Progressive web app): #6927 (comment)

The experience is very similar to what we have with the electron desktop app, but without the need to download the app (and maintain desktop specific code)

But it has some caveats
Like App (PWAs) can only be installed if you open web on Chrome (so far)

Navigation Menu

Repository navigation

[Performance] Reduce Desktop size #6927

What performance issue do we need to solve?

What is the impact of this on end-users?

List any benchmarks that show the severity of the issue

Proposed solution (if any)

List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)

Platform:

17 remaining items

End result of fixing this is the installer becomes 88MB

Architectures and sizes

Installing and removing the app

Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Performance] Reduce Desktop size #6927

Description

What performance issue do we need to solve?

What is the impact of this on end-users?

List any benchmarks that show the severity of the issue

Proposed solution (if any)

List any benchmarks after implementing the changes to show impacts of the proposed solution (if any)

Platform:

Activity

MelvinBot commented on Dec 29, 2021

kidroca commented on Dec 29, 2021

parasharrajat commented on Dec 29, 2021

iwiznia commented on Dec 29, 2021

marcaaron commented on Dec 29, 2021

MelvinBot commented on Dec 29, 2021

17 remaining items

kidroca commented on Jan 28, 2022

End result of fixing this is the installer becomes 88MB

kidroca commented on Jan 28, 2022

Architectures and sizes

iwiznia commented on Jan 28, 2022

kidroca commented on Jan 31, 2022

kidroca commented on Jan 31, 2022

kidroca commented on Feb 15, 2022

kidroca commented on Mar 16, 2022

Installing and removing the app

melvin-bot commented on May 30, 2022

mallenexpensify commented on May 31, 2022

kidroca commented on Jun 1, 2022

Summary

mallenexpensify commented on Jun 1, 2022

kidroca commented on Jun 1, 2022

kidroca commented on Jun 1, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions