perf(app): deduplicate and budget browser bundles

.github/workflows/ci.yml

@@ -206,7 +206,7 @@ jobs:
           yarn test:ts
           npm --prefix vscode run test
 
-      - name: Build demo app
+      - name: Build demo app and enforce bundle budgets
         run: yarn workspace @pondpilot/flowscope-app build
 
   schema-compat:

app/README.md

@@ -36,7 +36,42 @@ This will start the development server at `http://localhost:5173`.
 
 ### Architecture
 
-The application loads the WASM module generated from `@crates/flowscope-wasm`.
+The browser WASM artifact has one canonical home: `packages/core/wasm/`. The
+`@pondpilot/flowscope-core` loader dynamically imports the generated glue, and
+Vite emits the referenced `.wasm` file as a single hashed asset for both the dev
+server and production build. Do not copy WASM into `app/public`; public assets
+are copied verbatim and would duplicate the package-owned bytes. CLI serve mode
+embeds the same `app/dist` output, so it follows this loading path without a
+second WASM copy. The VS Code extension intentionally uses its separate
+Node-target build under `vscode/wasm-node/`.
+
+The default editor, Dagre graph, and analysis worker are startup features.
+Non-default analysis tabs, ELK layout, Librarian, share dialogs, PNG export,
+PDF parsing, and local embeddings load on first use. Keep optional heavyweight
+features behind an interaction-driven dynamic import rather than adding them to
+the startup graph.
+
+Production builds run `yarn check:bundle` automatically. The checker reads the
+Vite manifest so only the entry and its static imports count toward startup;
+dynamic feature chunks remain subject to the per-chunk and total budgets.
+Thresholds live in `bundle-budgets.json`:
+
+| Budget                     |                        Threshold |
+| -------------------------- | -------------------------------: |
+| Emitted WASM               |    exactly 1 file, at most 9 MiB |
+| Entry/startup JavaScript   |  at most 3 MiB raw, 600 KiB gzip |
+| Startup CSS                | at most 128 KiB raw, 24 KiB gzip |
+| Any async JavaScript chunk |                 at most 2.25 MiB |
+| All JavaScript             |                    at most 8 MiB |
+| Entire `dist`              |                   at most 18 MiB |
+
+Run the checker and its focused tests with:
+
+```bash
+yarn check:bundle
+yarn test:bundle-budget
+```
+
 - **State Management:** Zustand
 - **UI Components:** React Flow (graph), CodeMirror (editor), Tailwind CSS
 

app/bundle-budgets.json

@@ -0,0 +1,12 @@
+{
+  "wasmFileCount": 1,
+  "maxWasmBytes": 9437184,
+  "maxEntryJsBytes": 3145728,
+  "maxStartupJsBytes": 3145728,
+  "maxStartupJsGzipBytes": 614400,
+  "maxStartupCssBytes": 131072,
+  "maxStartupCssGzipBytes": 24576,
+  "maxAsyncJsChunkBytes": 2359296,
+  "maxTotalJsBytes": 8388608,
+  "maxTotalDistBytes": 18874368
+}

app/package.json

@@ -5,13 +5,17 @@
   "type": "module",
   "description": "FlowScope web application for SQL lineage visualization",
   "scripts": {
+    "predev": "node scripts/remove-legacy-wasm.mjs",
     "dev": "vite",
-    "build": "tsc && vite build",
+    "prebuild": "node scripts/remove-legacy-wasm.mjs",
+    "build": "tsc && vite build && yarn check:bundle",
+    "check:bundle": "node scripts/check-bundle-budget.mjs",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
-    "test": "vitest run",
+    "test": "vitest run && yarn test:bundle-budget",
+    "test:bundle-budget": "node --test scripts/check-bundle-budget.test.mjs",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest"
   },