close
  • English

      • Wasm

      Rsbuild provides native support for WebAssembly (WASM) modules, allowing you to import and use .wasm files directly in your project.

      What is WebAssembly

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

      Import

      You can reference a WebAssembly module in a JavaScript file using named imports:

      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/[contenthash:8].module.wasm"

      Output directory

      When you import a .wasm asset, Rsbuild outputs it to the dist/static/wasm directory by default.

      You can change the output directory for .wasm files using the output.distPath configuration:

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

      Type declaration

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

      For example, if the add.wasm file exports an add() method, 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;