Page MenuHomePhabricator

[Cashtab] Add code splitting to improve initial load time
ClosedPublic

Authored by bytesofman on Jun 6 2025, 18:47.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABC3f8b1475be89: [Cashtab] Add code splitting to improve initial load time
Summary

Code splitting is a standard technique in react to reduce the size of the main bundle by separating the main bundle into multiple smaller bundles. It can improve the time to render of a web page.

In Cashtab right now, the main bottlenecks for load times are

  1. getting the best chronik server
  2. Waiting to sync with the wallet's latest utxo set

It would be possible to do some of these in the background, but will take some iteration and techniques. We used to load without the spinner while the wallet utxo set loaded, but in practice this led to many users getting utxo errors, since lots of people load cashtab for the purpose of immediately sending a tx.

Will work on those bottlenecks. But, this is a general best practice we "should" do. Running some tests on Lighthouse, seems to get a slightly better score. The values chosen here were selected by AI and are in line with defaults. There is probably room for further optimization, but since this is not close to the biggest bottleneck on load time, it's hard to test that at this point.

Test Plan

npm test

Diff Detail

Repository
rABC Bitcoin ABC
Branch
better-build-again
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 33567
Build 66613: Build Diffcashtab-tests
Build 66612: arc lint + arc unit

Event Timeline

bytesofman published this revision for review.Jun 6 2025, 21:25
bytesofman edited the summary of this revision. (Show Details)
bytesofman edited the test plan for this revision. (Show Details)
This revision is now accepted and ready to land.Jun 7 2025, 06:32