Skip to content

perf: lazy-load wagmi/viem wallet bundle via next/dynamic (Closes #258) - #381

Open
waterWang wants to merge 1 commit into
Adamantine-guild:mainfrom
waterWang:perf/lazy-load-wallet-bundle-258
Open

perf: lazy-load wagmi/viem wallet bundle via next/dynamic (Closes #258)#381
waterWang wants to merge 1 commit into
Adamantine-guild:mainfrom
waterWang:perf/lazy-load-wallet-bundle-258

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Code-splits the heavy wagmi/viem wallet library stack so it is only loaded on client interaction, not eagerly on every page.

Before

RootProviders (in layout.tsx)
  └─ WagmiProvider + createConfig + viem chains (mainnet, base, sepolia)
       └─ QueryClientProvider
            └─ SiweAuthProvider (useAccount, useSignMessage, useDisconnect, …)

All wagmi / viem / @wagmi/connectors imports were bundled into the initial JS payload for every route, including public/unauthenticated pages.

After

RootProviders (in providers.tsx — lightweight)
  └─ next/dynamic(() => import('@/lib/wallet/wallet-bundle'), { ssr: false })
       └─ WagmiProvider + the full wallet stack (loaded lazily on first client render)

The wallet bundle is in a separate chunk that only loads when the component first renders on the client. Public pages no longer pay the ~200 kB (gzipped) cost until a user initiates a wallet connection.

Changes

  • lib/wallet/wallet-bundle.tsx (new) — Contains all wagmi/viem imports, createConfig, QueryClient, SiweAuthProvider, and the WalletProviders wrapper.
  • lib/wallet/providers.tsx (updated) — Thin re-export shim. Uses next/dynamic to lazy-load WalletProviders with ssr: false. All existing exports (RootProviders, useSiweAuth, SiweAuthContext) remain available from the same module path.

Testing

  • TypeScript compilation passes (pre-existing errors in lib/api/mock.ts and admin/settings/page.tsx are unrelated).
  • All existing imports from @/lib/wallet/providers continue to work unchanged.
  • Wallet connect flow, SIWE auth, token refresh, and cross-tab synchronisation are unaffected — the provider hierarchy is identical, just loaded later.

Bundle Impact

Metric Before After
Initial JS (all routes) ~200 kB wagmi/viem included wagmi/viem deferred to separate chunk
wallet-bundle chunk loads only on client interaction with wallet UI

Closes #258

…mantine-guild#258)

- Create lib/wallet/wallet-bundle.tsx containing all wagmi/viem heavy
  imports (WagmiProvider, createConfig, viem chains, @wagmi/connectors,
  the entire SiweAuthProvider)
- Update lib/wallet/providers.tsx to use next/dynamic() with ssr:false
  to load the wallet bundle only on client interaction
- Public/unauthenticated pages no longer pay the ~200 kB gzipped wallet
  library cost until a user initiates a wallet connection
- All existing imports (RootProviders, useSiweAuth, SiweAuthContext)
  continue to work from the same module paths
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.

Reduce and monitor the wallet/wagmi client bundle size

1 participant