gzip .wasm assets in-process

finos · texodus · Dec 22, 2021 · Dec 21, 2021 · Dec 22, 2021 · Dec 22, 2021
commit f3a7744e30bc7201030a6891477ec41967429b7c
diff --git a/cpp/perspective/build.js b/cpp/perspective/build.js
@@ -1,6 +1,8 @@
 const {execSync} = require("child_process");
 const os = require("os");
 const path = require("path");
+const fflate = require("fflate");
+const fs = require("fs");
 
 const stdio = "inherit";
 const env = process.PSP_DEBUG ? "debug" : "release";
@@ -21,6 +23,10 @@ try {
     });
     execSync(`cpy esm/**/* ../esm`, {cwd, stdio});
     execSync(`cpy cjs/**/* ../cjs`, {cwd, stdio});
+
+    const wasm = fs.readFileSync("dist/esm/perspective.cpp.wasm");
+    const compressed = fflate.compressSync(wasm);
+    fs.writeFileSync("dist/esm/perspective.cpp.wasm", compressed);
 } catch (e) {
     console.error(e);
     process.exit(1);

diff --git a/packages/perspective/package.json b/packages/perspective/package.json
@@ -59,8 +59,8 @@
         "automock": false
     },
     "dependencies": {
-        "tslib": "^1.9.3",
-        "ws": "^6.1.2"
+        "ws": "^6.1.2",
+        "fflate": "^0.7.2"
     },
     "devDependencies": {
         "@finos/perspective-build": "^1.0.7",

diff --git a/packages/perspective/src/js/perspective.browser.js b/packages/perspective/src/js/perspective.browser.js
@@ -13,15 +13,16 @@ import {Client} from "./api/client.js";
 import {WebSocketClient} from "./websocket/client";
 
 import {override_config} from "./config/index.js";
+import {decompressSync} from "fflate";
 
 import wasm_worker from "@finos/perspective/src/js/perspective.worker.js";
 import wasm from "@finos/perspective/dist/pkg/esm/perspective.cpp.wasm";
 
 // eslint-disable-next-line max-len
-const INLINE_WARNING = `Perspective has been compiled in INLINE mode.  While \
+const INLINE_WARNING = `Perspective has been compiled in "inline" mode.  While \
 Perspective's runtime performance is not affected, you may see smaller assets \
-size and faster engine initial load time using "file-loader" to build your
-application.
+size and faster engine initial load time using \
+"@finos/perspective-webpack-plugin" to build your application.
 https://perspective.finos.org/docs/md/js.html`;
 
 /**
@@ -47,6 +48,18 @@ const _override = /* @__PURE__ */ (function () {
                         const req = await fetch(_wasm);
                         this._wasm = await req.arrayBuffer();
                     }
+
+                    // Unzip if needed
+                    if (
+                        new Uint32Array(
+                            (this._wasm.buffer || this._wasm).slice(0, 4)
+                        )[0] == 559903
+                    ) {
+                        this._wasm = decompressSync(
+                            new Uint8Array(this._wasm)
+                        ).buffer;
+                    }
+
                     return this._wasm;
                 }
             })();

diff --git a/rust/perspective-viewer/build.js b/rust/perspective-viewer/build.js
@@ -1,8 +1,8 @@
 const {lessLoader} = require("esbuild-plugin-less");
 const {execSync} = require("child_process");
 const util = require("util");
-const exec = util.promisify(require("child_process").exec);
 const fs = require("fs");
+const fflate = require("fflate");
 
 const {IgnoreCSSPlugin} = require("@finos/perspective-build/ignore_css");
 const {IgnoreFontsPlugin} = require("@finos/perspective-build/ignore_fonts");
@@ -120,6 +120,10 @@ async function build_all() {
         INHERIT
     );
 
+    const wasm = fs.readFileSync("dist/pkg/perspective_viewer_bg.wasm");
+    const compressed = fflate.compressSync(wasm);
+    fs.writeFileSync("dist/pkg/perspective_viewer_bg.wasm", compressed);
+
     // Remove wasm-pack artifacts
     fs.rmSync("dist/pkg/package.json");
     fs.rmSync("dist/pkg/.gitignore");

diff --git a/rust/perspective-viewer/package.json b/rust/perspective-viewer/package.json
@@ -55,7 +55,8 @@
     "dependencies": {
         "@finos/perspective": "^1.0.7",
         "mobile-drag-drop-shadow-dom": "3.0.0",
-        "monaco-editor": "0.24.0"
+        "monaco-editor": "0.24.0",
+        "fflate": "^0.7.2"
     },
     "optionalDependencies": {
         "monaco-editor-webpack-plugin": "3.1.0"

diff --git a/rust/perspective-viewer/src/ts/init.ts b/rust/perspective-viewer/src/ts/init.ts
@@ -8,6 +8,8 @@
  *
  */
 
+import {decompressSync} from "fflate";
+
 import init_wasm from "@finos/perspective-viewer/dist/pkg/perspective_viewer.js";
 import wasm from "@finos/perspective-viewer/dist/pkg/perspective_viewer_bg.wasm";
 
@@ -21,7 +23,26 @@ window.addEventListener("unhandledrejection", (event) => {
 });
 
 async function load_wasm() {
-    return await init_wasm(await wasm);
+    // Perform a silly dance to deal with the different ways webpack and esbuild
+    // load binary
+    const compressed = (await wasm) as unknown;
+
+    let buffer;
+    if (compressed instanceof URL || typeof compressed === "string") {
+        const resp = await fetch(compressed.toString());
+        buffer = await resp.arrayBuffer();
+    } else if (compressed instanceof Uint8Array) {
+        buffer = compressed.buffer;
+    } else {
+        buffer = compressed as ArrayBuffer;
+    }
+
+    // Unzip if needed
+    if (new Uint32Array(buffer.slice(0, 4))[0] == 559903) {
+        return await init_wasm(decompressSync(new Uint8Array(buffer)));
+    } else {
+        return await init_wasm(buffer);
+    }
 }
 
 export const WASM_MODULE = load_wasm();
diff --git a/tools/perspective-build/build.js b/tools/perspective-build/build.js
@@ -9,8 +9,8 @@ const DEFAULT_BUILD = {
     sourcemap: true,
     metafile: true,
     entryNames: "[name]",
-    chunkNames: "[name]-[hash]",
-    assetNames: "[name]-[hash]",
+    chunkNames: "[name]",
+    assetNames: "[name]",
 };
 
 exports.build = async function build(config) {

diff --git a/tools/perspective-build/wasm.js b/tools/perspective-build/wasm.js
@@ -33,9 +33,7 @@ exports.WasmPlugin = function WasmPlugin(inline) {
             contents: `
                 import wasm from ${JSON.stringify(args.path)};
                 async function get_wasm() {
-                    const req = await fetch(new URL(wasm, import.meta.url));
-                    const buffer = await req.arrayBuffer();
-                    return buffer;
+                    return new URL(wasm, import.meta.url);
                 }
 
                 export default get_wasm();

diff --git a/tools/perspective-build/worker.js b/tools/perspective-build/worker.js
@@ -22,7 +22,10 @@ exports.WorkerPlugin = function WorkerPlugin(inline) {
                     assetNames: "[name]",
                     minify: !process.env.PSP_DEBUG,
                     bundle: true,
-                    sourcemap: true,
+                    // // Unfortunately source maps don't work with blob
+                    // // workers, which we need to make cross-origin
+                    // // workers not a PITA ..
+                    // sourcemap: true,
                 });
 
                 return {

diff --git a/yarn.lock b/yarn.lock
@@ -7613,6 +7613,11 @@ feed@^4.0.0:
   dependencies:
     xml-js "^1.6.11"
 
+fflate@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.7.2.tgz#1db42c416d7b2845d2883050aa4eef516c63f246"
+  integrity sha512-h/YiXnc37yYaGe61h3A4ZdsBzBqKG5hhrmopFizTru8xrfOiJuYX5oLnatBwNEpf9biOJrZVscuEQsUzIUAhpQ==
+
 figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"