React应用Web Worker使用@tensorflow/tfjs-tflite时WASM未加载报错如何解决

核心原因是Web Worker上下文和主线程隔离，@tensorflow/tfjs-tflite默认的WASM自动加载逻辑在Worker中无法正确识别资源路径，导致SIMD WASM文件未加载，_malloc等导出方法不存在。按以下步骤修复：

• 第一步：将依赖包中的WASM相关文件拷贝到公共资源目录
  从node_modules/@tensorflow/tfjs-tflite/dist/路径下，把所有前缀为tflite_web_api_cc的.js和.wasm文件（含SIMD版本）全部拷贝到React项目的public/tfjs-tflite-wasm/目录下，确保打包后这些文件可以被直接访问。

• 第二步：在Web Worker文件中手动指定WASM加载路径
  在Worker文件初始化TFLite逻辑前，先配置WASM资源路径，配置仅在当前Worker上下文生效，不要在主线程配置：

  import * as tflite from '@tensorflow/tfjs-tflite';
  
  // 配置WASM文件的公共访问路径，部署在子目录时需要对应调整前缀
  tflite.setWasmPath('/tfjs-tflite-wasm/');
  // 开启SIMD加速，和你用到的WASM版本对应
  tflite.setWasmOptions({ simd: true });
  

• 第三步：确认Worker逻辑隔离
  所有TFLite的初始化、模型加载、推理逻辑必须全部在Worker内部完成，不要将主线程创建的TFLite实例、模型实例传递给Worker，跨上下文的实例无法正常使用。

• 验证排查
  如果修改后仍报错，打开开发者工具的Network面板，筛选Web Worker上下文的请求，确认WASM文件的请求路径是否正确、是否返回200状态码，若出现404调整setWasmPath的路径参数即可。

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