diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7473748..10a6a53 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -27,6 +27,11 @@ jobs:
       - run: pnpm format:check
       - run: pnpm build
 
+      # Fails when the initial load, the Stellar scanner worker, or any
+      # lazy-loaded route/chain chunk grows past its budget. See
+      # scripts/bundle-budget-gate.mjs for what each budget covers and why.
+      - run: pnpm build:budget-check
+
       # Fails when a new critical (or more than the accepted number of high)
       # production dependency finding appears. See docs/SECURITY_AUDIT.md.
       - run: pnpm audit:gate
diff --git a/package.json b/package.json
index ec99e1c..f793f32 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "format:check": "prettier --check .",
     "audit:prod": "pnpm audit --prod",
     "audit:gate": "node scripts/audit-gate.mjs",
+    "build:budget-check": "node scripts/bundle-budget-gate.mjs",
     "prepare": "husky",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
diff --git a/scripts/bundle-budget-gate.mjs b/scripts/bundle-budget-gate.mjs
new file mode 100644
index 0000000..871bb4a
--- /dev/null
+++ b/scripts/bundle-budget-gate.mjs
@@ -0,0 +1,172 @@
+#!/usr/bin/env node
+// CI gate for production bundle size budgets (Wave 10, #219).
+//
+// Reads `dist/` after `pnpm build` and checks three things:
+//   1. Initial load  — every chunk referenced synchronously from
+//      dist/index.html (the `<script type="module">` entry plus any
+//      `<link rel="modulepreload">` chunks). This is everything the browser
+//      must fetch before the app shell can render; anything reachable only
+//      through a dynamic import() is excluded by construction.
+//   2. Scanner worker — src/workers/stellar-scanner.worker.ts, bundled as
+//      its own standalone file (workers can't share chunks with the main
+//      thread). It pulls in @stellar/stellar-sdk for XDR parsing, which is
+//      already close to the practical floor for that dependency (see the
+//      PR description for what was tried and why it didn't help further).
+//   3. Per-chunk — every other chunk in dist/assets: lazy-loaded routes
+//      (pages/*.tsx), lazy-loaded per-chain send/receive components, and
+//      wagmi/RainbowKit's own internal per-wallet-connector chunks (e.g.
+//      MetaMask SDK), which are dynamically imported by those libraries
+//      and outside this app's chunking choices. Keeps any one chunk from
+//      silently growing back into "the old monolith, just renamed."
+//
+// Usage:
+//   pnpm build && pnpm build:budget-check
+import { readFile, readdir, stat } from 'node:fs/promises';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+// --- Budgets (bytes) ---------------------------------------------------
+// Headroom above the measured baseline at the time this gate was added
+// (see the PR this shipped in for the exact numbers), so this catches
+// regressions without being so tight it flakes on routine minification
+// differences between dependency patch versions.
+export const INITIAL_LOAD_BUDGET_BYTES = 3_300_000; // ~3.3 MB
+export const WORKER_BUDGET_BYTES = 1_100_000; // ~1.1 MB
+// 750 KB covers the largest legitimate lazy chunk today (a wagmi/RainbowKit
+// wallet-connector chunk at ~689 KB), which this app's own code doesn't
+// control the size of; any lazy chunk this app does control (a page or a
+// per-chain send/receive component) should stay well under this in practice.
+export const PER_CHUNK_BUDGET_BYTES = 750_000;
+// -------------------------------------------------------------------------
+
+export class BundleBudgetError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'BundleBudgetError';
+  }
+}
+
+/** Extract every same-origin script/modulepreload src from built index.html. */
+export function extractInitialLoadPaths(html) {
+  const paths = new Set();
+  const tagPattern =
+    /<(?:script[^>]*\stype="module"[^>]*\ssrc="([^"]+)"|link[^>]*\srel="modulepreload"[^>]*\shref="([^"]+)")/g;
+  let match;
+  while ((match = tagPattern.exec(html)) !== null) {
+    const src = match[1] ?? match[2];
+    if (src && !/^https?:\/\//.test(src)) paths.add(src);
+  }
+  return [...paths];
+}
+
+async function sizeOf(distDir, relativePath) {
+  const cleaned = relativePath.replace(/^\/+/, '');
+  const absolute = path.join(distDir, cleaned);
+  try {
+    const info = await stat(absolute);
+    return info.size;
+  } catch {
+    throw new BundleBudgetError(`Referenced in index.html but not found on disk: ${cleaned}`);
+  }
+}
+
+async function findWorkerFile(assetsDir) {
+  const entries = await readdir(assetsDir);
+  const worker = entries.find((name) => name.startsWith('stellar-scanner.worker-'));
+  if (!worker) {
+    throw new BundleBudgetError('Could not find the stellar-scanner.worker chunk in dist/assets.');
+  }
+  return worker;
+}
+
+function formatKb(bytes) {
+  return `${(bytes / 1000).toFixed(1)} kB`;
+}
+
+export async function checkBudgets({
+  distDir = path.resolve(process.cwd(), 'dist'),
+  log = console.log,
+} = {}) {
+  const findings = [];
+  const assetsDir = path.join(distDir, 'assets');
+
+  // 1. Initial load
+  const html = await readFile(path.join(distDir, 'index.html'), 'utf8');
+  const initialPaths = extractInitialLoadPaths(html);
+  if (initialPaths.length === 0) {
+    throw new BundleBudgetError('No <script type="module"> entry found in dist/index.html.');
+  }
+  let initialLoadBytes = 0;
+  for (const relativePath of initialPaths) {
+    initialLoadBytes += await sizeOf(distDir, relativePath);
+  }
+  log(
+    `Initial load: ${formatKb(initialLoadBytes)} across ${initialPaths.length} file(s) ` +
+      `(budget ${formatKb(INITIAL_LOAD_BUDGET_BYTES)})`,
+  );
+  if (initialLoadBytes > INITIAL_LOAD_BUDGET_BYTES) {
+    findings.push(
+      `Initial load is ${formatKb(initialLoadBytes)}, over the ${formatKb(INITIAL_LOAD_BUDGET_BYTES)} budget.`,
+    );
+  }
+
+  // 2. Scanner worker
+  const workerFile = await findWorkerFile(assetsDir);
+  const workerBytes = await sizeOf(distDir, `assets/${workerFile}`);
+  log(
+    `Scanner worker (${workerFile}): ${formatKb(workerBytes)} (budget ${formatKb(WORKER_BUDGET_BYTES)})`,
+  );
+  if (workerBytes > WORKER_BUDGET_BYTES) {
+    findings.push(
+      `${workerFile} is ${formatKb(workerBytes)}, over the ${formatKb(WORKER_BUDGET_BYTES)} worker budget.`,
+    );
+  }
+
+  // 3. Every other chunk (lazy routes + lazy per-chain components)
+  const initialBasenames = new Set(initialPaths.map((p) => path.basename(p)));
+  const assetFiles = (await readdir(assetsDir)).filter(
+    (name) => name.endsWith('.js') && name !== workerFile && !initialBasenames.has(name),
+  );
+  for (const file of assetFiles) {
+    const bytes = await sizeOf(distDir, `assets/${file}`);
+    if (bytes > PER_CHUNK_BUDGET_BYTES) {
+      findings.push(
+        `assets/${file} is ${formatKb(bytes)}, over the ${formatKb(PER_CHUNK_BUDGET_BYTES)} per-chunk budget.`,
+      );
+    }
+  }
+  log(`Checked ${assetFiles.length} additional chunk(s) against the per-chunk budget.`);
+
+  return findings;
+}
+
+export async function main({ log = console.log, error = console.error } = {}) {
+  let findings;
+  try {
+    findings = await checkBudgets({ log });
+  } catch (err) {
+    if (!(err instanceof BundleBudgetError)) throw err;
+    error(`\nBundle budget gate failed: ${err.message}`);
+    error('\nRun `pnpm build` first, then `pnpm build:budget-check`.');
+    return 1;
+  }
+
+  if (findings.length > 0) {
+    error('\nBundle budget gate failed:');
+    for (const finding of findings) error(`  - ${finding}`);
+    error(
+      '\nEither lazy-load the offending code further, or — if the increase is ' +
+        'deliberate and justified (a real new dependency, not a regression) — ' +
+        'raise the relevant budget constant in scripts/bundle-budget-gate.mjs ' +
+        'with a comment explaining why.',
+    );
+    return 1;
+  }
+
+  log('\nBundle budget gate passed.');
+  return 0;
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  process.exit(await main());
+}
diff --git a/scripts/bundle-budget-gate.test.mjs b/scripts/bundle-budget-gate.test.mjs
new file mode 100644
index 0000000..b45fd7e
--- /dev/null
+++ b/scripts/bundle-budget-gate.test.mjs
@@ -0,0 +1,122 @@
+import { mkdtemp, mkdir, writeFile, rm } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+  BundleBudgetError,
+  checkBudgets,
+  extractInitialLoadPaths,
+  INITIAL_LOAD_BUDGET_BYTES,
+  PER_CHUNK_BUDGET_BYTES,
+  WORKER_BUDGET_BYTES,
+} from './bundle-budget-gate.mjs';
+
+describe('extractInitialLoadPaths', () => {
+  it('finds the module entry script', () => {
+    const html = '<script type="module" crossorigin src="/assets/index-ABC123.js"></script>';
+    expect(extractInitialLoadPaths(html)).toEqual(['/assets/index-ABC123.js']);
+  });
+
+  it('finds modulepreload links alongside the entry script', () => {
+    const html = [
+      '<link rel="modulepreload" href="/assets/vendor-XYZ.js">',
+      '<script type="module" src="/assets/index-ABC.js"></script>',
+    ].join('\n');
+    expect(extractInitialLoadPaths(html)).toEqual([
+      '/assets/vendor-XYZ.js',
+      '/assets/index-ABC.js',
+    ]);
+  });
+
+  it('ignores cross-origin scripts (e.g. analytics)', () => {
+    const html = [
+      '<script defer src="https://plausible.io/js/script.js"></script>',
+      '<script type="module" src="/assets/index-ABC.js"></script>',
+    ].join('\n');
+    expect(extractInitialLoadPaths(html)).toEqual(['/assets/index-ABC.js']);
+  });
+
+  it('returns an empty array when there is no module entry', () => {
+    expect(extractInitialLoadPaths('<html></html>')).toEqual([]);
+  });
+});
+
+describe('checkBudgets', () => {
+  let distDir;
+
+  async function writeFixture({ entryBytes = 100, workerBytes = 100, extraChunks = {} } = {}) {
+    distDir = await mkdtemp(path.join(tmpdir(), 'bundle-budget-'));
+    await mkdir(path.join(distDir, 'assets'), { recursive: true });
+    await writeFile(
+      path.join(distDir, 'index.html'),
+      '<script type="module" src="/assets/index-ABC.js"></script>',
+    );
+    await writeFile(path.join(distDir, 'assets', 'index-ABC.js'), 'x'.repeat(entryBytes));
+    await writeFile(
+      path.join(distDir, 'assets', 'stellar-scanner.worker-XYZ.js'),
+      'x'.repeat(workerBytes),
+    );
+    for (const [name, bytes] of Object.entries(extraChunks)) {
+      await writeFile(path.join(distDir, 'assets', name), 'x'.repeat(bytes));
+    }
+  }
+
+  afterEach(async () => {
+    if (distDir) await rm(distDir, { recursive: true, force: true });
+  });
+
+  it('passes with no findings when everything is under budget', async () => {
+    await writeFixture({ extraChunks: { 'Vault-abc123.js': 1000 } });
+    const findings = await checkBudgets({ distDir, log: () => {} });
+    expect(findings).toEqual([]);
+  });
+
+  it('flags an over-budget initial load', async () => {
+    await writeFixture({ entryBytes: INITIAL_LOAD_BUDGET_BYTES + 1 });
+    const findings = await checkBudgets({ distDir, log: () => {} });
+    expect(findings).toEqual([expect.stringContaining('Initial load')]);
+  });
+
+  it('flags an over-budget scanner worker', async () => {
+    await writeFixture({ workerBytes: WORKER_BUDGET_BYTES + 1 });
+    const findings = await checkBudgets({ distDir, log: () => {} });
+    expect(findings).toEqual([expect.stringContaining('stellar-scanner.worker')]);
+  });
+
+  it('flags an over-budget lazy chunk', async () => {
+    await writeFixture({
+      extraChunks: { 'Portfolio-huge123.js': PER_CHUNK_BUDGET_BYTES + 1 },
+    });
+    const findings = await checkBudgets({ distDir, log: () => {} });
+    expect(findings).toEqual([expect.stringContaining('Portfolio-huge123.js')]);
+  });
+
+  it('does not double-count the entry chunk as a lazy chunk', async () => {
+    await writeFixture({ entryBytes: PER_CHUNK_BUDGET_BYTES + 1 });
+    const findings = await checkBudgets({ distDir, log: () => {} });
+    // Over the (much larger) initial-load budget only if huge enough to
+    // also exceed INITIAL_LOAD_BUDGET_BYTES; here it shouldn't be flagged
+    // as a *per-chunk* violation under its own entry filename.
+    expect(findings.some((f) => f.includes('assets/index-ABC.js'))).toBe(false);
+  });
+
+  it('throws BundleBudgetError when the scanner worker chunk is missing', async () => {
+    distDir = await mkdtemp(path.join(tmpdir(), 'bundle-budget-'));
+    await mkdir(path.join(distDir, 'assets'), { recursive: true });
+    await writeFile(
+      path.join(distDir, 'index.html'),
+      '<script type="module" src="/assets/index-ABC.js"></script>',
+    );
+    await writeFile(path.join(distDir, 'assets', 'index-ABC.js'), 'x');
+
+    await expect(checkBudgets({ distDir, log: () => {} })).rejects.toThrow(BundleBudgetError);
+  });
+
+  it('throws BundleBudgetError when index.html has no module entry', async () => {
+    distDir = await mkdtemp(path.join(tmpdir(), 'bundle-budget-'));
+    await mkdir(path.join(distDir, 'assets'), { recursive: true });
+    await writeFile(path.join(distDir, 'index.html'), '<html></html>');
+
+    await expect(checkBudgets({ distDir, log: () => {} })).rejects.toThrow(BundleBudgetError);
+  });
+});
diff --git a/src/App.tsx b/src/App.tsx
index 20fc307..b67bfb6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,27 +1,15 @@
-import { useCallback, useEffect, useRef, useState, type FormEvent } from 'react';
+import { Suspense, useCallback, useEffect, useRef, useState, type FormEvent } from 'react';
 import { Routes, Route, Navigate, useLocation, useNavigate } from 'react-router-dom';
 import { Header } from '@/components/Header';
 import { AutoSign } from '@/components/AutoSign';
 import { TelemetryBanner } from '@/components/TelemetryBanner';
 import { OfflineBanner } from '@/components/OfflineBanner';
 import { UpdatePrompt } from '@/components/UpdatePrompt';
-import Send from '@/pages/Send';
-import Receive from '@/pages/Receive';
-import Privacy from '@/pages/Privacy';
-import Settings from '@/pages/Settings';
+import { RouteFallback } from '@/components/RouteFallback';
+import { RouteErrorBoundary, LazyPage } from '@/components/RouteErrorBoundary';
 import { HelpButton } from '@/components/HelpButton';
-import Vault from '@/pages/Vault';
-import Notifications from '@/pages/Notifications';
 import { useNotificationSW } from '@/hooks/useNotificationSW';
 import { useOfflineReconcile } from '@/hooks/useOfflineReconcile';
-import Schedule from '@/pages/Schedule';
-import StellarSplit from '@/pages/StellarSplit';
-import Names from '@/pages/Names';
-import NameProfile from '@/pages/NameProfile';
-import NamesAuctions from '@/pages/NamesAuctions';
-import Activity from '@/pages/Activity';
-import Portfolio from '@/pages/Portfolio';
-import Debug from '@/pages/Debug';
 import { useChain } from '@/context/ChainContext';
 import { useStealthKeys } from '@/context/StealthKeysContext';
 import { KeyVault } from '@/vault/KeyVault';
@@ -35,6 +23,27 @@ import { parseStellarQrPayload } from '@/utils/qr';
 import { useOfflineQueueStore } from '@/stores/offlineQueueStore';
 import { initNameWatchlistSync, cleanupNameWatchlistSync } from '@/store/nameWatchlistStore';
 
+// Code-split per route so the initial bundle only ships the app shell.
+// Each page (and the chain-specific wallet SDKs it pulls in — see
+// pages/Send.tsx and pages/Receive.tsx) loads on first navigation instead
+// of up front. RouteErrorBoundary + RouteFallback below handle the load.
+// Loaders stay as plain module-level functions (not lazy() itself) so
+// LazyPage can construct a fresh lazy component on retry; see
+// RouteErrorBoundary.tsx for why that distinction matters.
+const loadSend = () => import('@/pages/Send');
+const loadReceive = () => import('@/pages/Receive');
+const loadPrivacy = () => import('@/pages/Privacy');
+const loadVault = () => import('@/pages/Vault');
+const loadNotifications = () => import('@/pages/Notifications');
+const loadSchedule = () => import('@/pages/Schedule');
+const loadStellarSplit = () => import('@/pages/StellarSplit');
+const loadNames = () => import('@/pages/Names');
+const loadNameProfile = () => import('@/pages/NameProfile');
+const loadNamesAuctions = () => import('@/pages/NamesAuctions');
+const loadActivity = () => import('@/pages/Activity');
+const loadPortfolio = () => import('@/pages/Portfolio');
+const loadDebug = () => import('@/pages/Debug');
+
 function SessionLock({ onUnlock }: { onUnlock: () => void }) {
   const [passphrase, setPassphrase] = useState('');
   const [busy, setBusy] = useState(false);
@@ -210,24 +219,28 @@ export function App() {
       <TelemetryBanner />
       <AutoSign />
       <main className="mx-auto w-full max-w-[720px] flex-1 px-4 pb-16 pt-8 sm:px-6 sm:pb-24 sm:pt-10">
-        <Routes>
-          <Route path="/send" element={<Send />} />
-          <Route path="/receive" element={<Receive />} />
-          <Route path="/privacy" element={<Privacy />} />
-          <Route path="/vault" element={<Vault />} />
-          <Route path="/notifications" element={<Notifications />} />
-          <Route path="/schedule" element={<Schedule />} />
-          <Route path="/stellar/split" element={<StellarSplit />} />
-          <Route path="/pay" element={<Send />} />
-          <Route path="/names" element={<Names />} />
-          <Route path="/n/:name" element={<NameProfile />} />
-          <Route path="/names/auctions" element={<NamesAuctions />} />
-          <Route path="/activity" element={<Activity />} />
-          <Route path="/history" element={<Activity />} />
-          <Route path="/portfolio" element={<Portfolio />} />
-          <Route path="/debug" element={<Debug />} />
-          <Route path="*" element={<Navigate to="/send" replace />} />
-        </Routes>
+        <RouteErrorBoundary>
+          <Suspense fallback={<RouteFallback />}>
+            <Routes>
+              <Route path="/send" element={<LazyPage loader={loadSend} />} />
+              <Route path="/receive" element={<LazyPage loader={loadReceive} />} />
+              <Route path="/privacy" element={<LazyPage loader={loadPrivacy} />} />
+              <Route path="/vault" element={<LazyPage loader={loadVault} />} />
+              <Route path="/notifications" element={<LazyPage loader={loadNotifications} />} />
+              <Route path="/schedule" element={<LazyPage loader={loadSchedule} />} />
+              <Route path="/stellar/split" element={<LazyPage loader={loadStellarSplit} />} />
+              <Route path="/pay" element={<LazyPage loader={loadSend} />} />
+              <Route path="/names" element={<LazyPage loader={loadNames} />} />
+              <Route path="/n/:name" element={<LazyPage loader={loadNameProfile} />} />
+              <Route path="/names/auctions" element={<LazyPage loader={loadNamesAuctions} />} />
+              <Route path="/activity" element={<LazyPage loader={loadActivity} />} />
+              <Route path="/history" element={<LazyPage loader={loadActivity} />} />
+              <Route path="/portfolio" element={<LazyPage loader={loadPortfolio} />} />
+              <Route path="/debug" element={<LazyPage loader={loadDebug} />} />
+              <Route path="*" element={<Navigate to="/send" replace />} />
+            </Routes>
+          </Suspense>
+        </RouteErrorBoundary>
       </main>
       <HelpButton />
     </div>
diff --git a/src/components/RouteErrorBoundary.test.tsx b/src/components/RouteErrorBoundary.test.tsx
new file mode 100644
index 0000000..e2eb423
--- /dev/null
+++ b/src/components/RouteErrorBoundary.test.tsx
@@ -0,0 +1,38 @@
+/** @vitest-environment jsdom */
+import { Suspense, type ComponentType } from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { LazyPage, RouteErrorBoundary, type PageLoader } from './RouteErrorBoundary';
+
+describe('RouteErrorBoundary retry', () => {
+  it('re-attempts a fresh import on retry instead of replaying the cached rejection', async () => {
+    // Gated on a flag the test flips, not a call-count cutover: an uncommitted
+    // Suspense boundary can internally replay its first mount attempt several
+    // times in React's dev build, which would make a fixed "resolve on call N"
+    // mock flaky. The loader keeps rejecting through all of that replay noise,
+    // and only starts succeeding once the test simulates the fix being
+    // available and clicks Retry.
+    let shouldSucceed = false;
+    const loader: PageLoader = () => {
+      if (!shouldSucceed) {
+        return Promise.reject(new Error('chunk failed'));
+      }
+      return Promise.resolve({ default: (() => <div>Loaded page</div>) as ComponentType });
+    };
+
+    render(
+      <RouteErrorBoundary>
+        <Suspense fallback={<div>Loading...</div>}>
+          <LazyPage loader={loader} />
+        </Suspense>
+      </RouteErrorBoundary>,
+    );
+
+    await waitFor(() => screen.getByRole('alert'));
+
+    shouldSucceed = true;
+    fireEvent.click(screen.getByRole('button', { name: /retry/i }));
+
+    await waitFor(() => screen.getByText('Loaded page'));
+  });
+});
diff --git a/src/components/RouteErrorBoundary.tsx b/src/components/RouteErrorBoundary.tsx
new file mode 100644
index 0000000..83e57b3
--- /dev/null
+++ b/src/components/RouteErrorBoundary.tsx
@@ -0,0 +1,103 @@
+import {
+  Component,
+  lazy,
+  useMemo,
+  type ComponentType,
+  type ErrorInfo,
+  type ReactNode,
+} from 'react';
+
+interface RouteErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface RouteErrorBoundaryState {
+  error: Error | null;
+}
+
+export type PageLoader = () => Promise<{ default: ComponentType }>;
+
+/**
+ * Renders a lazy-loaded page. The lazy() component is built here, inside
+ * render, rather than once at module scope (as App.tsx's routes used to do):
+ * React.lazy calls its loader once per component instance and replays a
+ * cached rejection on every later render of that same instance, so a
+ * module-level lazy() can never actually be retried after a chunk load
+ * fails. Keeping it in useMemo instead ties its lifetime to this instance,
+ * so RouteErrorBoundary's retry (which remounts its children, see below)
+ * gets a fresh lazy component, and therefore a fresh import() attempt.
+ */
+export function LazyPage({ loader }: { loader: PageLoader }) {
+  const Page = useMemo(() => lazy(loader), [loader]);
+  return <Page />;
+}
+
+/**
+ * Catches failures from lazy-loaded route chunks (LazyPage/React.lazy in
+ * App.tsx). A dynamic import() rejects when a chunk 404s, most commonly
+ * because the user has an old tab open across a new deploy and the hashed
+ * chunk URL no longer exists, or a flaky connection dropped the request.
+ * "Retry" clears the error, which swaps this boundary's rendered output
+ * back from the fallback to `children`: since that's a different subtree
+ * at this position, React remounts it from scratch, giving any LazyPage
+ * inside a fresh lazy component and a fresh import() attempt instead of
+ * replaying the same rejected one forever. That usually succeeds on a
+ * transient network blip. If the chunk itself is gone (stale deploy), the
+ * full reload picks up the current index.html and asset manifest instead
+ * of retrying the same dead URL forever.
+ */
+export class RouteErrorBoundary extends Component<
+  RouteErrorBoundaryProps,
+  RouteErrorBoundaryState
+> {
+  state: RouteErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): RouteErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('Route chunk failed to load', error, info.componentStack);
+  }
+
+  private retry = () => {
+    this.setState({ error: null });
+  };
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div
+          role="alert"
+          className="flex min-h-[40vh] flex-col items-center justify-center gap-4 py-16 text-center"
+        >
+          <p className="font-heading text-sm uppercase tracking-widest text-on-surface">
+            This page failed to load
+          </p>
+          <p className="max-w-sm font-body text-xs leading-relaxed text-on-surface-variant">
+            That can happen after a new version ships while this tab was open, or on a flaky
+            connection.
+          </p>
+          <div className="mt-2 flex gap-3">
+            <button
+              type="button"
+              onClick={this.retry}
+              className="h-11 border border-primary px-6 font-heading text-[11px] font-semibold uppercase tracking-widest text-primary"
+            >
+              Retry
+            </button>
+            <button
+              type="button"
+              onClick={() => window.location.reload()}
+              className="h-11 bg-primary px-6 font-heading text-[11px] font-semibold uppercase tracking-widest text-surface"
+            >
+              Reload
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/src/components/RouteFallback.tsx b/src/components/RouteFallback.tsx
new file mode 100644
index 0000000..2d19602
--- /dev/null
+++ b/src/components/RouteFallback.tsx
@@ -0,0 +1,17 @@
+/**
+ * Suspense fallback shown while a lazy-loaded route chunk is downloading.
+ * Routes are code-split (see App.tsx) so the initial bundle only ships the
+ * app shell; this fills the gap between navigation and the chunk arriving.
+ */
+export function RouteFallback() {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-label="Loading page"
+      className="flex min-h-[40vh] items-center justify-center py-16"
+    >
+      <p className="font-heading text-[11px] uppercase tracking-widest text-outline">Loading…</p>
+    </div>
+  );
+}
diff --git a/src/pages/Receive.tsx b/src/pages/Receive.tsx
index 6854cad..066c804 100644
--- a/src/pages/Receive.tsx
+++ b/src/pages/Receive.tsx
@@ -1,11 +1,24 @@
-import { useEffect } from 'react';
+import { lazy, Suspense, useEffect } from 'react';
 import { useChain } from '@/context/ChainContext';
-import { HorizenReceive } from '@/components/HorizenReceive';
-import { StellarReceive } from '@/components/StellarReceive';
-import { SolanaReceive } from '@/components/SolanaReceive';
-import { CkbReceive } from '@/components/CkbReceive';
+import { RouteFallback } from '@/components/RouteFallback';
 import { trackPageView } from '@/lib/telemetry';
 
+// Same rationale as pages/Send.tsx: each chain's wallet SDK (and, for
+// Stellar, the scanner worker it spins up) only needs to load for the
+// chain the user actually picked.
+const HorizenReceive = lazy(() =>
+  import('@/components/HorizenReceive').then((m) => ({ default: m.HorizenReceive })),
+);
+const StellarReceive = lazy(() =>
+  import('@/components/StellarReceive').then((m) => ({ default: m.StellarReceive })),
+);
+const SolanaReceive = lazy(() =>
+  import('@/components/SolanaReceive').then((m) => ({ default: m.SolanaReceive })),
+);
+const CkbReceive = lazy(() =>
+  import('@/components/CkbReceive').then((m) => ({ default: m.CkbReceive })),
+);
+
 export default function Receive() {
   const { chain } = useChain();
 
@@ -13,8 +26,30 @@ export default function Receive() {
     trackPageView('/receive');
   }, []);
 
-  if (chain === 'stellar') return <StellarReceive />;
-  if (chain === 'solana') return <SolanaReceive />;
-  if (chain === 'ckb') return <CkbReceive />;
-  return <HorizenReceive />;
+  if (chain === 'stellar') {
+    return (
+      <Suspense fallback={<RouteFallback />}>
+        <StellarReceive />
+      </Suspense>
+    );
+  }
+  if (chain === 'solana') {
+    return (
+      <Suspense fallback={<RouteFallback />}>
+        <SolanaReceive />
+      </Suspense>
+    );
+  }
+  if (chain === 'ckb') {
+    return (
+      <Suspense fallback={<RouteFallback />}>
+        <CkbReceive />
+      </Suspense>
+    );
+  }
+  return (
+    <Suspense fallback={<RouteFallback />}>
+      <HorizenReceive />
+    </Suspense>
+  );
 }
diff --git a/src/pages/Send.tsx b/src/pages/Send.tsx
index 191a149..e72edcc 100644
--- a/src/pages/Send.tsx
+++ b/src/pages/Send.tsx
@@ -1,12 +1,24 @@
-import { useEffect } from 'react';
+import { lazy, Suspense, useEffect } from 'react';
 import { useChain } from '@/context/ChainContext';
-import { HorizenSend } from '@/components/HorizenSend';
-import { StellarSend } from '@/components/StellarSend';
-import { SolanaSend } from '@/components/SolanaSend';
-import { CkbSend } from '@/components/CkbSend';
+import { RouteFallback } from '@/components/RouteFallback';
 import { OfflineQueuePanel } from '@/components/OfflineQueuePanel';
 import { trackPageView } from '@/lib/telemetry';
 
+// Each chain pulls in its own wallet SDK (wagmi/RainbowKit, Freighter +
+// @stellar/stellar-sdk, @solana/wallet-adapter, @ckb-ccc). Only one chain is
+// ever rendered at a time, so load just that one instead of bundling all
+// four wallet stacks into the initial /send chunk.
+const HorizenSend = lazy(() =>
+  import('@/components/HorizenSend').then((m) => ({ default: m.HorizenSend })),
+);
+const StellarSend = lazy(() =>
+  import('@/components/StellarSend').then((m) => ({ default: m.StellarSend })),
+);
+const SolanaSend = lazy(() =>
+  import('@/components/SolanaSend').then((m) => ({ default: m.SolanaSend })),
+);
+const CkbSend = lazy(() => import('@/components/CkbSend').then((m) => ({ default: m.CkbSend })));
+
 export default function Send() {
   const { chain } = useChain();
 
@@ -20,32 +32,32 @@ export default function Send() {
 
   if (chain === 'stellar') {
     return (
-      <>
+      <Suspense fallback={<RouteFallback />}>
         <StellarSend />
         {queuePanel}
-      </>
+      </Suspense>
     );
   }
   if (chain === 'solana') {
     return (
-      <>
+      <Suspense fallback={<RouteFallback />}>
         <SolanaSend />
         {queuePanel}
-      </>
+      </Suspense>
     );
   }
   if (chain === 'ckb') {
     return (
-      <>
+      <Suspense fallback={<RouteFallback />}>
         <CkbSend />
         {queuePanel}
-      </>
+      </Suspense>
     );
   }
   return (
-    <>
+    <Suspense fallback={<RouteFallback />}>
       <HorizenSend />
       {queuePanel}
-    </>
+    </Suspense>
   );
 }