# Source: https://rsbuild.dev/guide/basic/wasm-assets.md

# 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: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](/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;
```