Import Wasm Assets

Rsbuild supports import WebAssembly assets in code.

What is WebAssembly

WebAssembly (Wasm) is a portable, high-performance binary format designed to execute CPU-intensive computing tasks in modern web browsers, bringing performance and reliability similar to native compiled code to the web platform.

Import

You can import a WebAssembly module directly in a JavaScript file:

index.js
import { add } from './add.wasm';

console.log(add); // [native code]
console.log(add(1, 2)); // 3

WebAssembly modules can also be imported via dynamic import:

index.js
import('./add.wasm').then(({ add }) => {
  console.log('---- Async Wasm Module');
  console.log(add); // [native code]
  console.log(add(1, 2)); // 3
});

You can also get the path of a WebAssembly module using the new URL syntax:

index.js
const wasmURL = new URL('./add.wasm', import.meta.url);

console.log(wasmURL).pathname; // "/static/wasm/[hash].module.wasm"

Output Directory

When a .wasm asset is imported, it will be output by Rsbuild to the dist/static/wasm directory by default.

You can change the output directory of .wasm files via output.distPath config.

export default {
  output: {
    distPath: {
      wasm: 'resource/wasm',
    },
  },
};

Type Declaration

When you import a Wasm file in TypeScript code, you usually need to add the corresponding type declaration.

For example, the add.wasm file exports an add() method, then you can create an add.wasm.d.ts file in the same directory and add the corresponding type declaration:

add.wasm.d.ts
export const add = (num1: number, num2: number) => number;