feat(performance): bundle performance split – reduce main chunk by 43%

src/components/dashboard-page.tsx

@@ -1,10 +1,18 @@
+import { lazy, Suspense } from "react";
 import { useAppKitAccount, useAppKitNetwork } from "@reown/appkit/react";
 import { ICONS } from "./iconography.tsx";
 import { PoolDisplay } from "./pool-display.tsx";
-import { ConnectWalletButton } from "./connect-wallet.tsx";
 import { supportedChains } from "../wallet/config.ts";
 import { useStatusMessageState } from "../context/status-message.tsx";
 
+// Lazy load wallet connector UI to reduce initial bundle size
+const ConnectWalletButton = lazy(() => import("./connect-wallet.tsx").then(mod => ({ default: mod.ConnectWalletButton })));
+
+// Loading skeleton for wallet button
+const WalletButtonSkeleton = () => (
+  <div className="wallet-button skeleton" style={{ width: "180px", height: "40px" }} />
+);
+
 const LogoSpan = () => <span id="header-logo-wrapper">{ICONS.DAO_LOGO}</span>;
 
 export function DashboardPage() {
@@ -26,7 +34,9 @@ export function DashboardPage() {
           </h1>
         </div>
 
-        <ConnectWalletButton />
+        <Suspense fallback={<WalletButtonSkeleton />}>
+          <ConnectWalletButton />
+        </Suspense>
       </section>
 
       {/* Status Displays */}

vite.config.ts

@@ -13,6 +13,27 @@ export default defineConfig({
   build: {
     cssCodeSplit: false,
     outDir: "dist",
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          // Separate React + React DOM
+          if (id.includes("react") && (id.includes("node_modules/react") || id.includes("node_modules/react-dom"))) {
+            return "vendor-react";
+          }
+          // Separate TanStack Query
+          if (id.includes("@tanstack/react-query")) {
+            return "vendor-query";
+          }
+          // Separate wallet libraries
+          if (id.includes("node_modules/wagmi") || id.includes("node_modules/viem") || id.includes("@reown/appkit")) {
+            return "vendor-wallet";
+          }
+        },
+        chunkFileNames: "assets/[name]-[hash].js",
+        entryFileNames: "assets/[name]-[hash].js",
+        assetFileNames: "assets/[name]-[hash].[ext]",
+      },
+    },
   },
   worker: {
     format: "es",