Add bundle size budget, CodeQL and audit to CI

Author: nyedle

.github/workflows/ci.yml

@@ -3,7 +3,10 @@ name: CI
 on:
   pull_request:
   push:
-    branches: [main, dev]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 
 jobs:
   check:
@@ -24,6 +27,12 @@ jobs:
       - name: Test
         run: npm test
 
+      - name: Bundle size
+        run: npm run size
+
+      - name: Audit
+        run: npm audit --audit-level=high
+
       - name: No new dependencies
         run: |
           if [ -s package.json ] && [ "$(node -p "Object.keys(require('./package.json').dependencies ?? {}).length")" != "0" ]; then

.github/workflows/codeql.yml

@@ -0,0 +1,28 @@
+name: CodeQL
+
+on:
+  pull_request:
+  push:
+  schedule:
+    - cron: "0 6 * * 1"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    permissions:
+      security-events: write
+      actions: read
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: github/codeql-action/init@v3
+        with:
+          languages: javascript-typescript
+          queries: security-and-quality
+
+      - uses: github/codeql-action/analyze@v3

build/check-bundle-size.ts

@@ -0,0 +1,48 @@
+import { readdirSync, statSync } from "node:fs";
+import { join } from "node:path";
+
+const BUDGET_BYTES: Record<string, number> = {
+  ".css": 45_000,
+  ".js": 280_000,
+};
+
+const ASSETS = join("dist", "assets");
+
+function bundles(): { name: string; ext: string; bytes: number }[] {
+  return readdirSync(ASSETS)
+    .filter((name) => name.endsWith(".css") || name.endsWith(".js"))
+    .map((name) => ({
+      name,
+      ext: name.slice(name.lastIndexOf(".")),
+      bytes: statSync(join(ASSETS, name)).size,
+    }));
+}
+
+const found = bundles();
+if (found.length === 0) {
+  console.error(`No bundles in ${ASSETS}. Run "npm run build" first.`);
+  process.exit(1);
+}
+
+const totals = new Map<string, number>();
+for (const { ext, bytes } of found) totals.set(ext, (totals.get(ext) ?? 0) + bytes);
+
+let failed = false;
+for (const [ext, budget] of Object.entries(BUDGET_BYTES)) {
+  const bytes = totals.get(ext) ?? 0;
+  const percent = Math.round((bytes / budget) * 100);
+  const label = `${ext.slice(1).toUpperCase().padEnd(3)} ${String(bytes).padStart(7)} / ${budget} bytes (${percent}%)`;
+  if (bytes > budget) {
+    failed = true;
+    console.error(`over budget  ${label}`);
+  } else {
+    console.log(`ok           ${label}`);
+  }
+}
+
+if (failed) {
+  console.error("");
+  console.error("A bundle grew past its budget. Justify the growth and raise BUDGET_BYTES,");
+  console.error("or find what was added. Adding a CSS framework once cost 19 kB unnoticed.");
+  process.exit(1);
+}

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc --noEmit && vite build",
     "test": "node --test \"src/**/*.test.ts\"",
+    "size": "node build/check-bundle-size.ts",
     "check": "npm run build && npm test",
     "preview": "vite preview"
   },