Skip to content

Reduce initial JS bundle size — code-split Soroban SDK and Chakra UI into separate chunks #40

Description

@prodbycorne

Problem

@stellar/stellar-sdk and @chakra-ui/react are imported at the top level in multiple files. The soroban.ts singleton is instantiated on module import (sorobanService.initialize() runs immediately). This means the Stellar SDK — which includes XDR codegen weighing ~400 KB minified — is in the initial JS bundle and blocks the first meaningful paint even for unauthenticated visitors who only want to read the home page or leaderboard.

Expected Behaviour

The Soroban SDK is loaded lazily only when the user initiates a wallet connection or a contract interaction. The farm page renders its skeleton immediately from the Next.js static export without waiting for the SDK.

Acceptance Criteria

  • src/lib/soroban.ts is refactored so SorobanService methods import from @stellar/stellar-sdk via dynamic import() inside each method body (or via a lazy initializer pattern) rather than at the module top level
  • sorobanService.initialize() is removed from the module level and called lazily on first actual contract call
  • @chakra-ui/react server components are split: src/app/layout.tsx only imports the ChakraProvider (which must be 'use client'); it does NOT import individual Chakra components at the layout level
  • next build output shows the route / chunk is ≤ 150 KB (first load JS) — measured via @next/bundle-analyzer
  • A Lighthouse CI run (GitHub Actions) asserts Performance score ≥ 85 on the home page
  • No functionality regressions — all contract calls continue to work after lazy loading

Relevant Files

  • src/lib/soroban.ts — dynamic imports inside methods
  • src/app/layout.tsx — Chakra provider isolation
  • next.config.ts — add @next/bundle-analyzer in development
  • .github/workflows/ — add Lighthouse CI step

Metadata

Metadata

Assignees

Labels

Official CampaignCampaign: Official CampaignhardRequires deep domain knowledge — Soroban, Stellar SDK, or complex stateperformanceRendering performance, caching, or bundle size

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions