[PR #1240] [MERGED] Further reduce bundle size by code splitting out pages that are only used on desktop/mobile #3617

Closed
opened 2026-02-28 20:44:17 -06:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/1240
Author: @j-f1
Created: 6/30/2023
Status: Merged
Merged: 7/19/2023
Merged by: @j-f1

Base: masterHead: jed/smaller


📝 Commits (10+)

📊 Changes

14 files changed (+152 additions, -83 deletions)

View changed files

📝 packages/desktop-client/src/components/FinancesApp.tsx (+22 -29)
📝 packages/desktop-client/src/components/Modals.tsx (+5 -1)
📝 packages/desktop-client/src/components/Notifications.tsx (+5 -8)
📝 packages/desktop-client/src/components/Titlebar.js (+0 -3)
📝 packages/desktop-client/src/components/reports/index.tsx (+9 -37)
packages/desktop-client/src/components/responsive/index.tsx (+27 -0)
packages/desktop-client/src/components/responsive/narrow.ts (+4 -0)
packages/desktop-client/src/components/responsive/wide.ts (+11 -0)
📝 packages/desktop-client/src/components/transactions/MobileTransaction.js (+3 -3)
packages/desktop-client/src/components/util/LoadComponent.tsx (+54 -0)
📝 packages/desktop-client/src/fonts.scss (+1 -1)
📝 packages/desktop-client/src/style.tsx (+1 -1)
📝 packages/desktop-client/src/util/withThemeColor.tsx (+4 -0)
upcoming-release-notes/1240.md (+6 -0)

📄 Description

Since people on desktops generally won’t be using the mobile page components, and vice versa, I’ve updated the main router to dynamically load in which ever one is necessary. Since all components are bundled together in one file per size class, the latency when switching routes is ~4ms. This should significantly decrease the bundle size on mobile, which is important since mobile devices tend to have lower specs.

Latency of opening /budget (measured from NarrowAlternate mounting to BudgetWrapper mounting) is 60ms locally, 140ms on Netlify with my WiFi, ~1s on the “Fast 3G” network speed preset)

Additionally, I discovered yet another font file we bundle but don’t use.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/1240 **Author:** [@j-f1](https://github.com/j-f1) **Created:** 6/30/2023 **Status:** ✅ Merged **Merged:** 7/19/2023 **Merged by:** [@j-f1](https://github.com/j-f1) **Base:** `master` ← **Head:** `jed/smaller` --- ### 📝 Commits (10+) - [`1e823b9`](https://github.com/actualbudget/actual/commit/1e823b91dfe7cff5e6b0acf32c13c4b6aa4934e9) Don’t bundle the experimental Inter variable font - [`7b06efc`](https://github.com/actualbudget/actual/commit/7b06efc0dca9552d48d5ecf9d4a0b929ee70edfa) Extract out component loader - [`df582f5`](https://github.com/actualbudget/actual/commit/df582f5a50165cc8555b94e61a5dde22f137cd65) Asynchronously load in the desktop/mobile components - [`2fa757a`](https://github.com/actualbudget/actual/commit/2fa757a4332dd7c826948190ce3a70fd78cfdd0e) + logs - [`0077cee`](https://github.com/actualbudget/actual/commit/0077cee8287f046ac458dd9d660c905095eb6be2) Restore 'reports' chunk name - [`db0d8cd`](https://github.com/actualbudget/actual/commit/db0d8cd912f3220a8d2d9cbf94f69f916853562e) Add release note - [`8a776ef`](https://github.com/actualbudget/actual/commit/8a776ef1074f34239a2b00b228e79671e006fc48) Remove Reports from wide.ts - [`d890b4a`](https://github.com/actualbudget/actual/commit/d890b4a3c3a48d5db3f072a0c0aad1176ebdf31f) Fix category - [`480b547`](https://github.com/actualbudget/actual/commit/480b547d4e2ec3f7e76dec0b2bbdb9b97fdc04c5) Revert "+ logs" - [`7aff533`](https://github.com/actualbudget/actual/commit/7aff533c32ea12d595aeeb93bd829a8eb251d1b5) Fix type checker errors ### 📊 Changes **14 files changed** (+152 additions, -83 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/components/FinancesApp.tsx` (+22 -29) 📝 `packages/desktop-client/src/components/Modals.tsx` (+5 -1) 📝 `packages/desktop-client/src/components/Notifications.tsx` (+5 -8) 📝 `packages/desktop-client/src/components/Titlebar.js` (+0 -3) 📝 `packages/desktop-client/src/components/reports/index.tsx` (+9 -37) ➕ `packages/desktop-client/src/components/responsive/index.tsx` (+27 -0) ➕ `packages/desktop-client/src/components/responsive/narrow.ts` (+4 -0) ➕ `packages/desktop-client/src/components/responsive/wide.ts` (+11 -0) 📝 `packages/desktop-client/src/components/transactions/MobileTransaction.js` (+3 -3) ➕ `packages/desktop-client/src/components/util/LoadComponent.tsx` (+54 -0) 📝 `packages/desktop-client/src/fonts.scss` (+1 -1) 📝 `packages/desktop-client/src/style.tsx` (+1 -1) 📝 `packages/desktop-client/src/util/withThemeColor.tsx` (+4 -0) ➕ `upcoming-release-notes/1240.md` (+6 -0) </details> ### 📄 Description Since people on desktops generally won’t be using the mobile page components, and vice versa, I’ve updated the main router to dynamically load in which ever one is necessary. Since all components are bundled together in one file per size class, the latency when switching routes is ~4ms. This should significantly decrease the bundle size on mobile, which is important since mobile devices tend to have lower specs. Latency of opening `/budget` (measured from `NarrowAlternate` mounting to `BudgetWrapper` mounting) is 60ms locally, 140ms on Netlify with my WiFi, ~1s on the “Fast 3G” network speed preset) Additionally, I discovered yet another font file we bundle but don’t use. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-02-28 20:44:17 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#3617