> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Wasm

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

:::tip 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:

```js title="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:

```js title="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:

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

console.log(wasmURL.pathname); // "/static/wasm/[contenthash:10].module.wasm"
```

## Source import

You can use [Source Phase Imports](https://github.com/tc39/proposal-source-phase-imports) to get a compiled `WebAssembly.Module` instead of the module exports:

```js title="index.js"
import source wasmModule from './add.wasm';

const instance = await WebAssembly.instantiate(wasmModule);
const { add } = instance.exports;

console.log(add(1, 2)); // 3
```

This is useful when you need to instantiate a Wasm module yourself, create multiple instances with different imports, or transfer the module to a worker.

:::tip
`import source` is supported in Rsbuild v2.1.0 and later.
:::

## 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](/config/output/dist-path.md) configuration:

```ts
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:

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