HTM-100: Pre-compress static resources

.github/workflows/test-and-deploy.yml

@@ -1,7 +1,7 @@
 name: 'Test and deploy'
 
 env: # Keep this in sync with Dockerfile version
-  NODE_VERSION: "18.17.1"
+  NODE_VERSION: "20.11.0"
 
 on:
   push:

Dockerfile

@@ -1,7 +1,7 @@
 ARG BUILDPLATFORM=linux/amd64
 ARG API_VERSION=snapshot
 
-FROM node:18.17.1 AS builder
+FROM node:20.11.0 AS builder
 
 ARG BASE_HREF=/
 ARG ADD_NG_LIBRARIES

bin/post-build-compress.js

@@ -0,0 +1,43 @@
+const path = require('path');
+const fs = require('fs');
+const zlib = require('zlib');
+const chalk = require('chalk');
+
+const EXTENSIONS = ['.js', '.css', '.svg', '.map'];
+const COMPRESS_SIZE_THRESHOLD = 1024;
+
+// recursive option requires Node v20
+const files = fs.readdirSync(path.resolve(__dirname, '../dist/app/'), { recursive: true, withFileTypes: true })
+  .filter(entry => entry.isFile())
+  .filter(entry => EXTENSIONS.includes(path.extname(entry.name)))
+  .map(entry => ({
+    filename: path.join(entry.path, entry.name),
+    displayName: path.join(entry.path, entry.name).split('/dist/')[1],
+  }));
+
+const displayNamePad = files.reduce((previous, current) => Math.max(previous, current.displayName.length), 0) - 2;
+
+let bundleTotal = 0;
+let compressedTotal = 0;
+files.forEach(entry => {
+  const { size } = fs.statSync(entry.filename);
+  if (size > COMPRESS_SIZE_THRESHOLD) {
+    process.stdout.write(`Compressing ${entry.displayName.padEnd(displayNamePad, ' ')} size ${(size + "").padStart(7, ' ')}, ratio: `);
+
+    const contents = fs.readFileSync(entry.filename);
+
+    const gzipped = zlib.gzipSync(contents, { level: 9 });
+    fs.writeFileSync(entry.filename + ".gz", gzipped);
+
+    const ratio = (gzipped.length / size).toFixed(2);
+    process.stdout.write(` ${chalk.bold(ratio)}\n`);
+
+    if (entry.displayName.startsWith('app/en/') && path.extname(entry.filename) !== '.map') {
+      bundleTotal += size;
+      compressedTotal += gzipped.length;
+    }
+  }
+});
+
+console.log(`Total single bundle ratio: ${chalk.green(chalk.bold((compressedTotal / bundleTotal).toFixed(2)))}, saved ${chalk.bold(((bundleTotal - compressedTotal) / 1024).toFixed(0))} KiB`);
+

package.json

@@ -7,7 +7,7 @@
     "start-nl": "ng serve app --configuration=nl",
     "build": "ng build app",
     "build-localized": "ng build app --localize",
-    "postbuild-localized": "node bin/post-build-localized.js",
+    "postbuild-localized": "node bin/post-build-localized.js && node bin/post-build-compress.js",
     "watch": "ng build --watch --configuration development app",
     "test": "jest --max-workers=4",
     "test:ci": "jest --ci --collect-coverage --reporters=default --reporters=jest-junit",