add wasm compression at build

Author: firu11

package-lock.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "engines": {
-    "node": ">=24.18.0 <25"
+    "node": ">=24.18.0 <27"
   },
   "scripts": {
     "dev": "vite",
@@ -36,6 +36,7 @@
     "prettier": "3.9.1",
     "typescript": "~6.0.3",
     "vite": "^8.1.0",
+    "vite-plugin-compression2": "^2.5.3",
     "vite-plugin-pwa": "^1.3.0",
     "vue-tsc": "^3.3.5"
   }

package.json

@@ -38,7 +38,7 @@ interface RpcRequest {
   args: unknown[];
 }
 
-const MB = 1_048_576;
+const MB = 1_000_000;
 let wasmReadyPromise: Promise<void> | null = null;
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -58,42 +58,47 @@ function progress(percentage: number, text_id: string, other: string = '') {
 
 async function fetchWasm(url: string): Promise<ArrayBuffer> {
   const response = await fetch(url);
-  if (!response.ok || !response.body) {
-    throw new Error(`WASM fetch failed: HTTP ${response.status} or missing body`);
+  if (!response.ok) {
+    throw new Error(`WASM fetch failed: HTTP ${response.status}`);
+  }
+  if (!response.body) {
+    throw new Error('WASM fetch failed: missing body');
+  }
+
+  const total = Number(response.headers.get('Content-Length'));
+  if (!total) {
+    throw new Error('WASM fetch failed: missing Content-Length');
   }
 
-  const contentLength = response.headers.get('Content-Length');
-  const encoding = response.headers.get('Content-Encoding');
-  const total = contentLength ? parseInt(contentLength, 10) : 1;
   const reader = response.body.getReader();
   const chunks: Uint8Array[] = [];
+
   let received = 0;
 
   while (true) {
     const { done, value } = await reader.read();
-    if (done) break;
+    if (done) {
+      break;
+    }
 
     chunks.push(value);
     received += value.byteLength;
-    const encodedRecieved = received / (encoding == 'gzip' ? 4 : 1); // account for ~4x compression with Gzip
 
-    const pct = total ? 5 + Math.round((encodedRecieved / total) * 85) : 50;
-    const sizeMsg = total
-      ? `${(encodedRecieved / MB).toFixed(1)} / ${(total / MB).toFixed(1)} MB`
-      : `${(encodedRecieved / MB).toFixed(1)} MB`;
+    const pct = 5 + Math.round((received / total) * 85);
+    const sizeMsg = `${(received / MB).toFixed(1)} / ${(total / MB).toFixed(1)} MB`;
 
-    progress(Math.min(pct, 90), `fetchingWasm`, sizeMsg);
+    progress(Math.min(pct, 90), 'fetchingWasm', sizeMsg);
   }
 
-  // Merge chunks
-  const merged = new Uint8Array(received);
+  const wasm = new Uint8Array(received);
   let offset = 0;
+
   for (const chunk of chunks) {
-    merged.set(chunk, offset);
+    wasm.set(chunk, offset);
     offset += chunk.byteLength;
   }
 
-  return merged.buffer;
+  return wasm.buffer;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

src/wasm/worker.ts

@@ -2,6 +2,8 @@ import { fileURLToPath, URL } from 'node:url';
 
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import { compression, defineAlgorithm } from 'vite-plugin-compression2';
+import { constants } from 'node:zlib';
 import { VitePWA } from 'vite-plugin-pwa';
 
 const base = process.env.GITHUB_PAGES == 'true' ? '/web-client/' : '/';
@@ -11,6 +13,23 @@ export default defineConfig({
   base,
   plugins: [
     vue(),
+    // compress wasm files to brotli, zstd and gzip
+    compression({
+      include: /\.wasm$/,
+      algorithms: [
+        defineAlgorithm('gzip', { level: 9 }),
+        defineAlgorithm('zstandard', {
+          params: {
+            [constants.ZSTD_c_compressionLevel]: 19,
+          },
+        }),
+        defineAlgorithm('brotliCompress', {
+          params: {
+            [require('zlib').constants.BROTLI_PARAM_QUALITY]: 11,
+          },
+        }),
+      ],
+    }),
     VitePWA({
       registerType: 'autoUpdate',
       manifest: {
@@ -41,7 +60,7 @@ export default defineConfig({
       },
 
       workbox: {
-        globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff2,wasm}'],
+        globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,woff2,wasm,zst,br,gz}'],
         maximumFileSizeToCacheInBytes: 25 * 1024 * 1024, // 25MiB (core.wasm is a big boy)
         cleanupOutdatedCaches: true,
         navigateFallback: `${base}index.html`,