apf_portal/scripts/check-gzip-budgets.mjs

#!/usr/bin/env node
/**
 * Check the gzip-transfer size of an Angular production build against
 * the ADR-0017 perf budgets. Complements Angular CLI's native
 * `budgets` (which only compare RAW sizes — no built-in gzip mode).
 *
 * Strategy
 * --------
 * 1. Parse the Angular `index.html` of the build output. Every
 *    `<script src="…">` and `<link href="…">` referencing a JS/CSS
 *    asset is part of the **initial** payload. Everything else in
 *    the output dir is a **lazy** chunk loaded on demand.
 * 2. Gzip every JS/CSS file with level 9 (matching what HTTP
 *    servers typically emit for static assets) and report the
 *    resulting transfer size.
 * 3. Compare:
 *    - sum of initial JS  ≤ BUDGET_INITIAL_JS_TOTAL
 *    - any single lazy JS ≤ BUDGET_LAZY_JS_EACH
 *    - sum of all CSS     ≤ BUDGET_CSS_TOTAL
 *    Exit non-zero on any violation.
 *
 * Invocation: `node scripts/check-gzip-budgets.mjs [dist-dir]`.
 * The default `dist-dir` is `dist/apps/portal-shell/browser`.
 */

import { readdir, readFile } from 'node:fs/promises';
import { gzipSync } from 'node:zlib';
import { basename, join } from 'node:path';

const DEFAULT_DIST = 'dist/apps/portal-shell/browser';
const dist = process.argv[2] ?? DEFAULT_DIST;

// ADR-0017 budgets (gzip transfer, in bytes).
const BUDGET_INITIAL_JS_TOTAL = 300 * 1024;
const BUDGET_LAZY_JS_EACH = 100 * 1024;
const BUDGET_CSS_TOTAL = 150 * 1024;

const fmtKb = (n) => `${(n / 1024).toFixed(2)} KB`;

const padFile = (s) => s.padEnd(36);

async function gzipSize(path) {
  return gzipSync(await readFile(path), { level: 9 }).byteLength;
}

async function main() {
  let indexHtml;
  try {
    indexHtml = await readFile(join(dist, 'index.html'), 'utf8');
  } catch (err) {
    console.error(`✗ Could not read index.html under "${dist}".`);
    console.error(`  Did you run "nx build portal-shell --configuration=production" first?`);
    console.error(`  Underlying error: ${err.message}`);
    process.exit(2);
  }

  // Match every src=/href= that points at a .js or .css file in the
  // output dir. Robust enough for Angular's emitted index.html (which
  // is well-formed and predictable).
  const referenced = new Set(
    [...indexHtml.matchAll(/(?:src|href)\s*=\s*["']([^"']+\.(?:js|css))["']/g)].map((m) =>
      basename(m[1]),
    ),
  );

  const all = await readdir(dist);
  const jsFiles = all.filter((f) => f.endsWith('.js'));
  const cssFiles = all.filter((f) => f.endsWith('.css'));

  const initialJs = jsFiles.filter((f) => referenced.has(f));
  const lazyJs = jsFiles.filter((f) => !referenced.has(f));

  const sized = async (files) =>
    Promise.all(files.map(async (f) => ({ f, size: await gzipSize(join(dist, f)) })));

  const initialJsSizes = await sized(initialJs);
  const lazyJsSizes = await sized(lazyJs);
  const cssSizes = await sized(cssFiles);

  const sum = (arr) => arr.reduce((s, x) => s + x.size, 0);
  const totalInitialJs = sum(initialJsSizes);
  const totalCss = sum(cssSizes);

  const violations = [];

  console.log(`Gzip-transfer budget check (ADR-0017) — output: ${dist}\n`);

  console.log('  Initial JS (loaded on first paint):');
  for (const { f, size } of initialJsSizes.sort((a, b) => b.size - a.size)) {
    console.log(`    ${padFile(f)} ${fmtKb(size)}`);
  }
  const initialFlag =
    totalInitialJs > BUDGET_INITIAL_JS_TOTAL ? ' ✗ EXCEEDS BUDGET' : ' ✓';
  console.log(
    `    ${padFile('TOTAL')} ${fmtKb(totalInitialJs)} / ${fmtKb(BUDGET_INITIAL_JS_TOTAL)}${initialFlag}`,
  );
  if (totalInitialJs > BUDGET_INITIAL_JS_TOTAL) {
    violations.push(
      `initial JS total ${fmtKb(totalInitialJs)} > budget ${fmtKb(BUDGET_INITIAL_JS_TOTAL)}`,
    );
  }

  console.log('\n  Lazy JS chunks (loaded on demand):');
  if (lazyJsSizes.length === 0) {
    console.log('    (none)');
  }
  for (const { f, size } of lazyJsSizes.sort((a, b) => b.size - a.size)) {
    const flag = size > BUDGET_LAZY_JS_EACH ? ' ✗ EXCEEDS BUDGET' : '';
    console.log(`    ${padFile(f)} ${fmtKb(size)}${flag}`);
    if (size > BUDGET_LAZY_JS_EACH) {
      violations.push(`lazy chunk ${f} ${fmtKb(size)} > per-chunk budget ${fmtKb(BUDGET_LAZY_JS_EACH)}`);
    }
  }
  console.log(`    (per-chunk budget: ${fmtKb(BUDGET_LAZY_JS_EACH)})`);

  console.log('\n  CSS files:');
  for (const { f, size } of cssSizes.sort((a, b) => b.size - a.size)) {
    console.log(`    ${padFile(f)} ${fmtKb(size)}`);
  }
  const cssFlag = totalCss > BUDGET_CSS_TOTAL ? ' ✗ EXCEEDS BUDGET' : ' ✓';
  console.log(
    `    ${padFile('TOTAL')} ${fmtKb(totalCss)} / ${fmtKb(BUDGET_CSS_TOTAL)}${cssFlag}`,
  );
  if (totalCss > BUDGET_CSS_TOTAL) {
    violations.push(`CSS total ${fmtKb(totalCss)} > budget ${fmtKb(BUDGET_CSS_TOTAL)}`);
  }

  if (violations.length > 0) {
    console.error('\n✗ ADR-0017 budget violations:');
    for (const v of violations) console.error(`  - ${v}`);
    process.exit(1);
  }

  console.log('\n✓ All ADR-0017 gzip-transfer budgets respected.');
}

main().catch((err) => {
  console.error('Budget check failed:', err);
  process.exit(2);
});