硬编码WebAssembly到JS中，如何避免运行时内存峰值？

我正在探索将WebAssembly打包进单个JavaScript文件的方案，目前已实现一种可行方式：将wasm文件转成base64字符串硬编码在JS里，运行时先把base64转成Uint8Array，再生成WebAssembly.Module和Instance，示例代码如下：

await Deno.writeTextFile(
    './static/wasm/bundle.js',
    `import { initSync } from './app.js'\ninitSync(new WebAssembly.Module(Uint8Array.from(atob('${btoa(
        [ ...await Deno.readFile('./static/wasm/app_bg.wasm') ]
            .map(byte => String.fromCharCode(byte))
            .join('')
    )}').split('').map(char => char.charCodeAt(0)))))`
)

但我担心wasm文件体积较大时，处理这个base64字符串会引发内存问题——虽然该字符串仅在启动初期使用一次，之后会被GC回收，但还是想找其他硬编码方式，要求：仅运行一次处理、启动阶段内存峰值更低，可接受用更长处理时间换低内存占用，且禁止加载外部资源。

1. 直接编码为Uint8Array字面量 #

将wasm的字节直接转换成数值数组字面量，比如new Uint8Array([0x00, 0x61, 0x73, 0x6d, ...])。

• 内存优势：无需存储base64字符串，也跳过atob/btoa转换过程，直接构造Uint8Array，避免base64带来的33%额外体积内存开销。
• 打包实现代码：

const wasmBytes = await Deno.readFile('./static/wasm/app_bg.wasm');
const byteArrayLiteral = Array.from(wasmBytes).join(',');
await Deno.writeTextFile(
    './static/wasm/bundle.js',
    `import { initSync } from './app.js'\ninitSync(new WebAssembly.Module(new Uint8Array([${byteArrayLiteral}])))`
);

• 说明：大体积wasm会生成超长数组字面量，但JS引擎对这类字面量解析效率可观，且无中间字符串内存开销。

2. 分块解码加载 #

针对超大型wasm，将字节数组拆分为多个小块，运行时逐个处理合并，避免一次性加载完整大数组。

• 内存优势：每次仅处理部分字节，显著降低启动阶段内存峰值。
• 打包实现代码：

const wasmBytes = await Deno.readFile('./static/wasm/app_bg.wasm');
const chunkSize = 1024 * 64; // 按64KB分块
const chunks = [];
for (let i = 0; i < wasmBytes.length; i += chunkSize) {
    chunks.push(Array.from(wasmBytes.slice(i, i + chunkSize)).join(','));
}

let jsContent = `import { initSync } from './app.js'\nconst wasmBuffer = new Uint8Array(${wasmBytes.length});\n`;
let offset = 0;
chunks.forEach((chunk, idx) => {
    jsContent += `const chunk${idx} = [${chunk}];\nwasmBuffer.set(chunk${idx}, ${offset});\noffset += chunk${idx}.length;\n`;
});
jsContent += `initSync(new WebAssembly.Module(wasmBuffer));`;

await Deno.writeTextFile('./static/wasm/bundle.js', jsContent);

• 代价：增加运行时代码执行步骤，处理时间变长，但内存峰值控制更优。

3. 用DataView逐字节构造ArrayBuffer #

直接生成构造ArrayBuffer的代码，通过DataView逐个写入字节，内存占用最低，但处理速度最慢。

• 内存优势：无需预先存储完整字节数组字面量，边构造边写入，彻底避免一次性加载大数组的内存开销。
• 打包实现代码：

const wasmBytes = await Deno.readFile('./static/wasm/app_bg.wasm');
let jsContent = `import { initSync } from './app.js'\nconst buffer = new ArrayBuffer(${wasmBytes.length});\nconst view = new DataView(buffer);\n`;
wasmBytes.forEach((byte, idx) => {
    jsContent += `view.setUint8(${idx}, ${byte});\n`;
});
jsContent += `initSync(new WebAssembly.Module(new Uint8Array(buffer)));`;

await Deno.writeTextFile('./static/wasm/bundle.js', jsContent);

• 说明：生成的JS文件体积会非常大，运行时需执行大量setUint8调用，仅适合对内存峰值要求极高的超大型wasm场景。

内容的提问来源于stack exchange，提问作者Dr. Light