fix: lazy-load @reown/appkit to reduce initial bundle size#492
Closed
jfstn wants to merge 1 commit intostx-labs:mainfrom
Closed
fix: lazy-load @reown/appkit to reduce initial bundle size#492jfstn wants to merge 1 commit intostx-labs:mainfrom
jfstn wants to merge 1 commit intostx-labs:mainfrom
Conversation
@stacks/connect has two top-level imports from @reown/appkit-universal-connector
and @reown/appkit/networks. These cause consumer bundlers (Next.js, Webpack,
Vite) to eagerly resolve the entire @reown/appkit dependency tree — including
Lit UI components (@reown/appkit-ui, @reown/appkit-scaffold-ui, @reown/appkit-pay,
@reown/appkit-siwx) that @stacks/connect never renders — into the initial
JavaScript bundle. When bundled and minified, this adds ~1.7MB of JavaScript
that must be downloaded, parsed, and executed on every page load, even if
WalletConnect is never used. It also causes "Lit is in dev mode" warnings
during SSR.
Changes:
- request.ts: import → import type for UniversalConnectorConfig
(type-only usage, erased at compile time)
- walletconnect/config.ts: inline Bitcoin CAIP network objects,
removing import { bitcoin } from @reown/appkit/networks
- walletconnect/index.ts: dynamic import() for UniversalConnector
inside the already-async initializeWalletConnectProvider
- tsup.config.ts: explicitly externalize @reown packages
The @reown/appkit code is now only loaded when a user actually clicks
WalletConnect — not on every page load.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
jannik-stacks
approved these changes
Feb 17, 2026
Collaborator
jannik-stacks
left a comment
There was a problem hiding this comment.
Great work, thank you very much for this!
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
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.
Description
As a Stacks Connect consumer,
@reown/appkitand its dependency tree (~1.7MB including Lit UI components) are eagerly loaded via top-level imports even if WalletConnect is never used. This causes unnecessary bundle bloat and Lit SSR warnings ("Multiple versions of Lit loaded", "Lit is in dev mode") in frameworks like Next.js.Motivation for change
Three source files had top-level
importstatements from@reown/appkit-universal-connectorand@reown/appkit/networks. Consumer bundlers (webpack, Vite) eagerly resolve these, pulling in the full@reown/appkittree — including Lit UI packages (appkit-ui,appkit-scaffold-ui,appkit-pay) that@stacks/connectnever uses directly.What was changed
request.ts—import→import typeforUniversalConnectorConfig(only used as a type)walletconnect/config.ts— replaced runtime@reown/appkit/networksimport with inlined CAIP network objects; converted remaining imports toimport typewalletconnect/index.ts— convertedUniversalConnectorto dynamicawait import()inside the already-asyncinitializeWalletConnectProvidertsup.config.ts— added@reown/appkit-universal-connectorand@reown/appkittoexternalarrayHow does this impact application developers
WalletConnect.Chains,.Networks,.Default,.initializeProviderall remain exported and unchanged@reown/appkitis now loaded on-demand only when WalletConnect is actually usedBefore / After
ESM bundle (
dist/index.mjs):@reownimportsimport()from'@reown/appkit-universal-connector',from'@reown/appkit/networks'import('@reown/appkit-universal-connector')Tested with Next.js 15 consumer app:
@reown/appkitloaded at page loadType of Change
Does this introduce a breaking change?
No. All public APIs remain unchanged. The only difference is that
@reown/appkit-universal-connectoris loaded lazily instead of eagerly.Are documentation updates required?
No documentation updates required.
Testing information
npm run build— succeeds, ESM output has 0 top-level@reownimportsnpm run test— all existing tests passnpm run typecheck— passes@stacks/connect— Lit warnings gone, WalletConnect QR modal works on-demandChecklist