frontend: code-split TON Connect out of the entry chunk (672 kB → 237 kB) - #314
Merged
Conversation
… kB)
The @tonconnect/{ui,sdk} stack was ~430 kB of the 672 kB entry bundle, loaded
on every boot even though the title → login → hub path never touches a wallet.
TonConnectUIProvider moves out of main.tsx into a lazy TonConnectGate that
App.tsx mounts only around the screens that need it (wallet, earn, scan
without a bound wallet), sticky once mounted so the TonConnectUI instance and
its connection survive navigation. WalletScreen and EarnPanel are lazy too —
a single static import of either re-inlines the whole stack. shortAddress
moved to format.ts for the same reason: PassScan and HeroTab imported it from
WalletScreen, which was a bridge back into the entry chunk.
The chunk is prefetched right after login resolves, so pressing CONNECT does
not wait on a cold fetch.
scripts/check-bundle.mjs guards the split in CI (build:frontend runs it,
build:all picks it up) — vite only warns at 500 kB and a warning does not
fail a build.
Entry 672.60 → 236.65 kB (gzip 200.42 → 73.09).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The
@tonconnect/{ui,sdk}stack was ~430 kB of the 672 kB entry bundle, downloaded on every boot even though the boot path (title → login → hub) never touches a wallet. Vite warned about the 500 kB chunk on every build.TonConnectUIProvidermoves out ofmain.tsxinto a lazyTonConnectGate, mounted byApp.tsxonly around the screens that need it (wallet,earn,scanwithout a bound wallet). Sticky once mounted — unmounting the provider would destroy theTonConnectUIinstance and the wallet connection with it.WalletScreenandEarnPanelare lazy too: a single static import of either re-inlines the whole stack.shortAddressmoved toformat.ts—PassScanandHeroTabimported it fromWalletScreen, which was a hidden bridge back into the entry chunk.Numbers
Async chunks:
lib428.67 kB,WalletScreen3.59,EarnPanel3.29,useWalletBind1.04,TonConnectGate0.27.Guard
scripts/check-bundle.mjsfails the build if the entry chunk exceeds 320 kB.build:frontendruns it, sobuild:all(already in CI) picks it up — vite only warns at 500 kB and a warning doesn't fail anything. Mutation-tested: restoring the staticEarnPanelimport pushes the entry to 653.6 kB and the guard exits 1.Testing
lint/typecheck/build:all/ 628 backend tests green. No frontend test infra exists — the lazy provider mount wants a manual pass on staging (connect wallet, scan pass, EARN tab).