perf(website): add WASM preload hint and versioned SW cache key (issues #402, #403)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

website/next.config.ts

@@ -8,6 +8,15 @@ const withAnalyzer = withBundleAnalyzer({
 const nextConfig: NextConfig = {
   async headers() {
     return [
+      {
+        source: '/wasm/:path*',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=31536000, immutable',
+          },
+        ],
+      },
       {
         source: '/(.*)',
         headers: [

website/package.json

@@ -6,8 +6,10 @@
     "dev": "next dev",
     "prebuild": "node scripts/split-changelog.js",
     "build": "next build",
+    "postbuild": "npm run update-sw-hash",
     "start": "next start",
-    "analyze": "ANALYZE=true next build"
+    "analyze": "ANALYZE=true next build",
+    "update-sw-hash": "node -e \"const {createHash} = require('crypto'); const fs = require('fs'); const hash = createHash('sha256').update(fs.readFileSync('public/wasm/gosqlx.wasm')).digest('hex').slice(0,8); const sw = fs.readFileSync('public/wasm-sw.js','utf8').replace(/gosqlx-wasm-[a-f0-9-]+/, 'gosqlx-wasm-' + hash); fs.writeFileSync('public/wasm-sw.js', sw); console.log('SW cache key updated to: gosqlx-wasm-' + hash);\""
   },
   "dependencies": {
     "@codemirror/lang-sql": "^6.10.0",

website/public/wasm-sw.js

@@ -1,4 +1,4 @@
-const WASM_CACHE = 'gosqlx-wasm-v1';
+const WASM_CACHE = 'gosqlx-wasm-7fe84bbe';
 const WASM_URL = '/wasm/gosqlx.wasm';
 
 self.addEventListener('install', (event) => {

website/src/app/playground/page.tsx

@@ -8,8 +8,17 @@ export const metadata: Metadata = {
 
 export default function PlaygroundPage() {
   return (
-    <div className="h-[calc(100vh-64px)]">
-      <PlaygroundLoader />
-    </div>
+    <>
+      {/* Preload WASM binary to start download before JS hydration */}
+      <link
+        rel="preload"
+        href="/wasm/gosqlx.wasm"
+        as="fetch"
+        crossOrigin="anonymous"
+      />
+      <div className="h-[calc(100vh-64px)]">
+        <PlaygroundLoader />
+      </div>
+    </>
   );
 }