在 JS性能高阶-WebAssembly（二）里面，我们在nodeJS环境里面测试一下怎么使用wasm，并对比了两者的性能

那接下来我们看一下怎么在前端中使用 .wasm文件

开发环境

1. vue3
2. vite
3. typescript

第一步

找到我们上一个章节中产出的 test.wasm 文件

该文件里面只有一个循环数组的方法

第二步

然后我们将这个test.wasm 文件放入到我们的前端项目里面的public文件夹下面

第三步

随便建立一个vue文件，然后在里面输入下面的内容

<template>
  <div>
    <button @click="testWasm">teset wasm</button>
  </div>
</template>

<script setup lang="ts">
  const testWasm = async () => {
    try {
      const { instance } = await WebAssembly.instantiateStreaming(fetch('/wasm/test.wasm'));

      const starTime2 = Date.now();

      // 类型断言告诉 TS 这是一个函数
      const sum_to_n = instance.exports.sum_to_n as (n: number) => number;
      const result = sum_to_n(10_000_000);

      const endTime2 = Date.now();
      console.log('wasm花费的时间:', endTime2 - starTime2);
      console.log(result);
    } catch (err) {
      console.error('Failed to load wasm', err);
    }
  };
</script>

<style scoped lang="scss"></style>

第四步

接下来运行我们的项目，然后测试是否可用

结果显示，一切正常

并且测试的结果和在nodeJS环境中测试的结果一致

如果想用 Vite 的 import 方式

Vite 也支持直接 import wasm，但需要配置 vite.config.ts：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    target: 'esnext', // 保证支持 wasm
  },
  optimizeDeps: {
    exclude: ['your-wasm-package'], // 如果 wasm 是 npm 包的话
  },
});

然后你可以直接在组件里：

import wasmModuleUrl from '/wasm/my_module.wasm?url';

const { instance } = await WebAssembly.instantiateStreaming(fetch(wasmModuleUrl));