scrabble-game/ui/scripts/bundle-size.mjs

// Bundle-size budget gate. Measures the gzipped JS each built HTML entry actually loads and
// fails CI if any part overruns its budget — a guard against an accidental heavy dependency.
// The build has two entries (vite rollupOptions.input): the game app (index.html, served at
// /app/ + /telegram/) and the landing (landing.html, served at /). Rollup hoists the code
// shared by both (the Svelte runtime + i18n + aboutContent) into one chunk each entry
// preloads, so a page's real payload is its own entry chunk plus that shared chunk.
//
// Three independent gates on the natural chunk boundaries, each with realistic headroom:
//   - app entry (main):     the app's own code; grows with features.
//   - shared (svelte+i18n):  near-static framework runtime; only drifts on a dep/Svelte bump.
//   - landing own:           the landing's own code; kept minimal.
// Today ~74 KB (app entry) + ~23 KB (shared) = ~97 KB for the app; the landing's own chunk is
// ~2 KB. Lazy-loading was analysed and rejected (no total-size win — every chunk still
// ships and is summed — plus added request latency); the bulk is the Connect/FlatBuffers
// transport runtime + generated bindings + the Svelte runtime, irreducible within scope.
import { readFileSync, existsSync } from 'node:fs';
import { gzipSync } from 'node:zlib';
import { join } from 'node:path';

const DIST = 'dist';

// Per-chunk gzip budgets in KB. The app entry was raised to 110 for the local move-preview
// wiring, then to 112 for the PWA install feature (the install CTA + the pwa detection /
// service-worker registration live in the app entry; the heavy dict subsystem stays in lazy
// chunks). Its scoped CSS lands in the CSS chunk, not this JS budget.
const BUDGET = { app: 112, shared: 30, landing: 5 };

// gzipped returns the gzipped byte size of a built asset, or 0 when the reference is not a
// local file (e.g. the Telegram SDK loaded from a CDN) or is missing.
function gzipped(file) {
  return file && existsSync(file) ? gzipSync(readFileSync(file)).length : 0;
}

// attr reads a double-quoted HTML attribute from a single tag string.
function attr(tag, name) {
  const m = tag.match(new RegExp(`\\s${name}="([^"]+)"`));
  return m ? m[1] : null;
}

// localAsset maps an HTML asset URL to its path under dist/, or null for an external URL.
function localAsset(url) {
  return !url || /^https?:/.test(url) ? null : join(DIST, url.replace(/^\.?\/+/, ''));
}

// entryAssets parses a built HTML entry and returns the local JS it eagerly loads: the module
// entry chunk (<script type="module" src>) and the preloaded chunks (<link rel="modulepreload"
// href>). Robust to attribute order; external and non-JS references drop out.
function entryAssets(html) {
  const src = readFileSync(join(DIST, html), 'utf8');
  const tags = [...src.matchAll(/<(?:script|link)\b[^>]*>/g)].map((m) => m[0]);
  const entryTag = tags.find((t) => /type="module"/.test(t) && /\ssrc="/.test(t));
  const entry = entryTag ? localAsset(attr(entryTag, 'src')) : null;
  const preloads = tags
    .filter((t) => /rel="modulepreload"/.test(t))
    .map((t) => localAsset(attr(t, 'href')))
    .filter((f) => f && f.endsWith('.js'));
  return { entry: entry && entry.endsWith('.js') ? entry : null, preloads };
}

const kb = (bytes) => (bytes / 1024).toFixed(1);

const app = entryAssets('index.html');
const landing = entryAssets('landing.html');

const appEntry = gzipped(app.entry);
const shared = app.preloads.reduce((sum, f) => sum + gzipped(f), 0);
const landingEntry = gzipped(landing.entry);
const landingShared = landing.preloads.reduce((sum, f) => sum + gzipped(f), 0);

console.log(`app     (index.html)  : entry ${kb(appEntry)} + shared ${kb(shared)} = ${kb(appEntry + shared)} KB gzip`);
console.log(`landing (landing.html): entry ${kb(landingEntry)} + shared ${kb(landingShared)} = ${kb(landingEntry + landingShared)} KB gzip`);
console.log('gates (gzip):');

let failed = false;
function gate(label, bytes, budgetKb) {
  const over = bytes > budgetKb * 1024;
  console.log(`  ${over ? 'FAIL' : ' ok '} ${label}: ${kb(bytes)} / ${budgetKb} KB`);
  if (over) failed = true;
}
gate('app entry (main)', appEntry, BUDGET.app);
gate('shared (svelte + i18n)', shared, BUDGET.shared);
gate('landing own', landingEntry, BUDGET.landing);

if (failed) {
  console.error('bundle exceeds size budget');
  process.exit(1);
}