perf(dashmint-lab): strip SDK modulepreload + parallelize fonts

thephez · claude · thephez · commit ba49a5b54772 · 2026-04-30T14:08:38.000-04:00
Vite auto-injects <link rel="modulepreload"> for every dynamic-import chunk it discovers. For the ~8MB Evo SDK that defeated the previous deferral commit — the browser raced to fetch the SDK in parallel with the entry chunk, blocking FCP. Filter it out via build.modulePreload.resolveDependencies. Also move the Google Fonts URL out of CSS @import (which serializes the font fetch behind the stylesheet parse) and into <link> tags in index.html with preconnect to fonts.googleapis.com / fonts.gstatic.com, so the font fetch parallelizes with the JS download. Together with the prior dynamic-import commit, FCP drops from 5.1s to 2.7s on a localhost preview Lighthouse run. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diff --git a/example-apps/dashmint-lab/index.html b/example-apps/dashmint-lab/index.html
@@ -5,6 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DashMint Lab — Dash Platform NFTs</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+    />
   </head>
   <body>
     <div id="root"></div>
diff --git a/example-apps/dashmint-lab/src/styles/globals.css b/example-apps/dashmint-lab/src/styles/globals.css
@@ -1,4 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
+/* Google Fonts (Inter + JetBrains Mono) loaded via <link> in index.html
+ * with rel="preconnect" so the font fetch parallelizes with JS download
+ * instead of being serialized behind this stylesheet. */
 @import "tailwindcss";
 
 /*
diff --git a/example-apps/dashmint-lab/vite.config.ts b/example-apps/dashmint-lab/vite.config.ts
@@ -23,6 +23,18 @@ export default defineConfig({
     },
   },
   plugins: [react(), tailwindcss()],
+  build: {
+    // Vite auto-injects <link rel="modulepreload"> for every dynamic-import
+    // chunk it discovers at build time. For the ~8MB Evo SDK + WASM chunk
+    // this defeats the whole point of dynamic-importing it: the browser
+    // races to fetch the SDK in parallel with the entry chunk, blocking
+    // FCP. Strip the SDK preload so it only fetches when SessionContext
+    // actually triggers the dynamic import.
+    modulePreload: {
+      resolveDependencies: (_filename, deps) =>
+        deps.filter((d) => !d.includes("evo-sdk")),
+    },
+  },
   test: {
     environment: "node",
     include: ["test/**/*.test.{ts,tsx}"],
