如何在Vue组件中加载Rust cdylib的WASM模块且避免重复初始化？

我刚好处理过类似的场景，结合你的需求，咱们一步步实现「复用WASM模块避免重复初始化」的逻辑，同时适配Vue组件的使用场景：

1. 封装WASM模块为单例（核心：避免重复初始化） #

首先我们要把rust-wasm-loader加载的WASM模块封装成单例，确保整个应用生命周期里只初始化一次。假设你的Rust cdylib库编译后导出了add、complex_calculate这类方法：

创建一个src/utils/wasm-singleton.js文件，作为WASM模块的统一封装层：

// 导入修改版rust-wasm-loader加载的WASM模块（路径根据你的实际构建配置调整）
import initWasm from '../path-to-your-compiled-wasm';

// 存储已初始化的WASM实例（单例）
let wasmInstance = null;

// 初始化函数，仅执行一次
async function getWasmInstance() {
  if (!wasmInstance) {
    // 调用loader的初始化方法，加载并实例化WASM
    // 如果需要传递内存配置等参数，可在这里传入，比如：
    // wasmInstance = await initWasm({ memory: new WebAssembly.Memory({ initial: 10 }) });
    wasmInstance = await initWasm();
  }
  return wasmInstance;
}

// 对外暴露封装后的WASM方法
export async function add(a, b) {
  const instance = await getWasmInstance();
  return instance.add(a, b);
}

export async function complexCalculate(data) {
  const instance = await getWasmInstance();
  return instance.complex_calculate(data);
}

这样不管你在多少地方调用这些方法，WASM模块只会初始化一次，后续调用都是复用已实例化好的对象。

2. Vue组件中的复用逻辑 #

方式一：全局挂载（适合全应用频繁使用的场景） #

在main.js里把封装好的WASM工具函数挂载到Vue全局属性：

import { createApp } from 'vue';
import App from './App.vue';
import * as wasmUtils from './utils/wasm-singleton';

const app = createApp(App);
// 将WASM工具挂载到Vue全局，方便所有组件直接调用
app.config.globalProperties.$wasm = wasmUtils;

app.mount('#app');

然后在任意Vue组件中使用：

<template>
  <div>
    <p>加法结果：{{ addResult }}</p>
    <button @click="runAdd">计算10+20</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getCurrentInstance } from 'vue';

const addResult = ref(null);
const { proxy } = getCurrentInstance();

async function runAdd() {
  // 调用全局挂载的WASM方法
  addResult.value = await proxy.$wasm.add(10, 20);
}
</script>

方式二：按需引入（适合局部使用的场景） #

如果WASM模块只在少数组件中使用，直接在组件里导入封装好的单例模块即可：

<template>
  <div>
    <p>复杂计算结果：{{ calcResult }}</p>
    <button @click="runComplexCalc">执行计算</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { complexCalculate } from '../utils/wasm-singleton';

const calcResult = ref(null);

async function runComplexCalc() {
  const inputData = [1, 3, 5, 7, 9];
  calcResult.value = await complexCalculate(inputData);
}
</script>

3. 修改版rust-wasm-loader的注意事项 #

确保你的修改版loader满足以下要求：

• 导出的初始化函数是异步的（返回Promise），这样我们可以用await等待初始化完成
• 初始化函数执行后，返回的是包含所有Rust导出方法的实例对象，而不是每次调用都重新初始化的函数

内容的提问来源于stack exchange，提问作者SavageS