perf: lazy-load wagmi providers only on interactive pages#266
perf: lazy-load wagmi providers only on interactive pages#266brendanjryan merged 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fb29394a20
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
src/pages/_mdx-wrapper.tsx
Outdated
| const Providers = React.lazy(() => import('../components/Providers')) | ||
|
|
||
| /** Path prefixes that need the Wagmi/QueryClient provider tree for interactive demos. */ | ||
| const PROVIDER_PATH_PREFIXES = ['/guide/', '/quickstart/', '/accounts/'] |
There was a problem hiding this comment.
Include
/accounts root in provider-gated routes
The new route gate only matches prefixes ending with a slash (/accounts/), so the actual Accounts landing page at /accounts does not get wrapped in Providers. That page renders interactive demo steps (src/pages/accounts/index.mdx) that rely on Wagmi/React Query context (for example useConnection in steps/auth/Connect.tsx), so visiting /accounts can leave the demo non-functional or throw missing-provider errors. Add an exact /accounts match (or normalize path matching) so the root page is covered.
Useful? React with 👍 / 👎.
src/pages/_mdx-wrapper.tsx
Outdated
| return ( | ||
| <Layout> | ||
| <Providers mipd={context.frontmatter?.mipd as boolean | undefined}>{children}</Providers> | ||
| {needsProviders ? ( | ||
| <React.Suspense fallback={children}> |
There was a problem hiding this comment.
Do not render provider-dependent children as Suspense fallback
Using fallback={children} causes the same MDX tree to render without Providers while the lazy import is loading. On interactive routes, those children include components that call Wagmi hooks, so a cold load/navigation can render hooks outside WagmiProvider/QueryClientProvider before the chunk resolves, leading to runtime errors or hydration instability. The fallback should be a neutral loading UI (or null), not provider-dependent content.
Useful? React with 👍 / 👎.
fb29394 to
c56bded
Compare
11bb498 to
285eb93
Compare
285eb93 to
8446420
Compare
Previously every MDX page was wrapped in <Providers> which eagerly loaded wagmi + viem + tanstack-query + accounts SDK (121 KB brotli). Only ~24 pages actually use interactive wallet demos. Pages now opt in via frontmatter `interactive: true`. The _mdx-wrapper uses React.lazy to load Providers only when this flag (or `mipd`) is set. Content pages no longer fetch the wagmi bundle at all. Measured: -36 scripts, -3.9 MB JS on content pages, -25% TBT. Also adds bundle:analyze and lighthouse measurement scripts.
8446420 to
3580c13
Compare
Problem
Every MDX page (198 pages) was wrapped in
<Providers>which eagerly loaded wagmi + viem + tanstack-query + accounts SDK (121 KB brotli / 590 KB raw). Only 24 pages actually use interactive wallet demos.Solution
Pages opt in via frontmatter
interactive: true. The_mdx-wrapperusesReact.lazyto load Providers only when this flag (ormipd) is set. Content pages never download or parse the wagmi bundle.Measured impact
Lighthouse network audit (dev server, before → after on
/learn/tempo):Changes
_mdx-wrapper.tsx—React.lazy+ frontmatter check, documentedinteractive: truefrontmatterscripts/bundle-diff.ts— scansdist/, brotli-compresses, groups into framework/heavy-deps/appscripts/lighthouse.ts— runs Lighthouse across worst pages, supports--save/--comparebundle:analyze,bundle:diff,bundle:save,lighthouse,lighthouse:mobile