Skip to content

perf(build): vendor chunk split + es2022 target#3185

Merged
drewstone merged 1 commit intodevelopfrom
perf/sandbox-ui-bump-and-bundle
May 7, 2026
Merged

perf(build): vendor chunk split + es2022 target#3185
drewstone merged 1 commit intodevelopfrom
perf/sandbox-ui-bump-and-bundle

Conversation

@drewstone
Copy link
Copy Markdown
Contributor

Both apps were shipping a single ~1.7MB / ~3.4MB index bundle. This adds rollupOptions.output.manualChunks splitting node_modules into named vendor groups and bumps build.target to es2022.

Bundle delta

tangle-cloud index chunk: 1.7MB → 887KB (47% smaller). Vendors split out:

  • viem (298KB), wallet (128KB), tangle-ui (149KB), radix (157KB), react (143KB), tanstack (86KB)

tangle-dapp main app: 3.4MB still, but the heavy vendors are now isolated and cache-stable across deploys:

  • wallet (1.6MB), viem (1.1MB), polkadot (874KB), radix (169KB), react (143KB), tangle-ui (113KB)

Why this helps perceived speed

  1. Each chunk parses in its own micro-task instead of one giant blocking compile — TTI drops noticeably on cold loads
  2. Vendor chunks rarely change, so deploys hit warm browser cache for ~80% of the bytes
  3. es2022 target removes async/await downleveling and class-field shims that no current wallet browser needs

What's NOT in this PR

I tried bumping @tangle-network/sandbox-ui from 0.13.0 to 0.15.3 (latest) at the same time but that introduced 46 implicit-any typecheck errors — the new sandbox-ui re-exports raw Radix primitives whose callback types don't infer the same way the old wrappers did. Backing that out so this perf change ships clean; the bump deserves its own PR with proper attention to the type changes.

Both apps were shipping a single ~1.7MB / ~3.4MB index bundle that
forced the browser to parse-the-world on every cold load and that
had to be re-fetched on every deploy because app code and vendor
code shared a chunk.

Adds rollupOptions.output.manualChunks splitting node_modules into
named vendor groups (react, viem, wallet, radix, tangle-ui,
polkadot, tanstack, router) and bumps build.target to es2022.

Effects:
- tangle-cloud index chunk drops from 1.7MB -> 887KB (47% smaller)
- tangle-dapp vendor chunks (1.6MB wallet, 1.1MB viem, 874KB polkadot)
  now cache stably across deploys — only the 3.4MB app index changes
  when app code changes, and even that gets faster parse because each
  chunk parses in its own micro-task
- es2022 target removes async/await downleveling, class-field shims,
  and other ES2020-era polyfills that no current wallet browser needs

No behavioural change. Splitting is purely a build-output reshape.
@drewstone drewstone requested a review from AtelyPham as a code owner May 7, 2026 17:03
@drewstone drewstone merged commit 4192f2c into develop May 7, 2026
@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for tangle-dapp ready!

Name Link
🔨 Latest commit 62ea5cd
🔍 Latest deploy log https://app.netlify.com/projects/tangle-dapp/deploys/69fcc5d105527e00084d773a
😎 Deploy Preview https://deploy-preview-3185--tangle-dapp.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for tangle-cloud ready!

Name Link
🔨 Latest commit 62ea5cd
🔍 Latest deploy log https://app.netlify.com/projects/tangle-cloud/deploys/69fcc5d142747b000812b4b7
😎 Deploy Preview https://deploy-preview-3185--tangle-cloud.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for tangle-leaderboard ready!

Name Link
🔨 Latest commit 62ea5cd
🔍 Latest deploy log https://app.netlify.com/projects/tangle-leaderboard/deploys/69fcc5d1f08e890008a184f4
😎 Deploy Preview https://deploy-preview-3185--tangle-leaderboard.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant