引用 Wasm 资源

Rsbuild 支持在代码引用 WebAssembly 资源。

什么是 WebAssembly

WebAssembly（缩写为 wasm）是一种可移植、高性能的字节码格式，被设计用来在现代 Web 浏览器中执行 CPU 密集型计算任务，为 Web 平台带来了接近本地编译代码的性能和可靠性。

引用方式

你可以直接在 JavaScript 文件中引用一个 WebAssembly 模块：

index.js

  1. import { add } from './add.wasm';
  3. console.log(add); // [native code]
  4. console.log(add(1, 2)); // 3

也可以通过 dynamic import 来引用 WebAssembly 模块：

index.js

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

还可以通过 new URL 语法来获取 WebAssembly 模块的路径：

index.js

  1. const wasmURL = new URL('./add.wasm', import.meta.url);
  3. console.log(wasmURL).pathname; // "/static/wasm/[hash].module.wasm"

输出目录

当 .wasm 资源被引用后，默认会被 Rsbuild 输出到 dist/static/wasm 目录下。

你可以通过 output.distPath 配置项来修改 .wasm 产物的输出目录。

  1. export default {
  2.   output: {
  3.     distPath: {
  4.       wasm: 'resource/wasm',
  5.     },
  6.   },
  7. };

类型声明

当你在 TypeScript 代码中引用 Wasm 文件时，通常需要添加相应的类型声明。

比如 add.wasm 文件导出了 add() 方法，那么你可以在同级目录下创建一个 add.wasm.d.ts 文件，并添加相应的类型声明：

add.wasm.d.ts

  1. export const add = (num1: number, num2: number) => number;