跳到主要内容

Assembly

2023年12月18日
柏拉文
越努力，越幸运

一、认识​

Vite 对于 .wasm 文件也提供了开箱即用的支持

二、语法​

2.1 创建 .wasm 文件​

Vite 对于 .wasm 文件也提供了开箱即用的支持，我们拿一个斐波拉契的 .wasm 文件(原文件已经放到Github 仓库中)来进行一下实际操作，对应的 JavaScript 原文件如下:

export function fib(n) {
  var a = 0,
    b = 1;
  if (n > 0) {
    while (--n) {
      let t = a + b;
      a = b;
      b = t;
    }
    return b;
  }
  return a;
}

2.2 导入 .wasm 文件​

// Header/index.tsx
import init from './fib.wasm?init';

type FibFunc = (num: number) => number;

init({}).then((instance) => {
  const fibFunc = instance.exports.fib as FibFunc;
  console.log('Fib result:', fibFunc(10));
});

Vite 会对.wasm文件的内容进行封装，默认导出为 init 函数，这个函数返回一个 Promise，因此我们可以在其 then 方法中拿到其导出的成员——fib方法。

2.3 测试 wasm 效果​

回到浏览器，我们可以查看到计算结果，说明 .wasm 文件已经被成功执行: