使用 `hash-wasm` 的 `createMD5`方法，生成md5值，批处理500张图片会报错， `RangeError: WebAssembly.instantiate(): Out of m

处理大量文件时遇到 RangeError: WebAssembly.instantiate(): Out of memory 错误，通常是因为一次性创建了过多的 WebAssembly 实例，导致内存不足。每个 createMD5() 调用都会创建一个新的 WebAssembly 实例，这对于大量的并发操作来说是不可行的。

为了优化代码并避免此问题，可以考虑以下几种改进方法：

1. 单例模式复用 MD5 实例

通过创建一个单例模式的 MD5 实例，并在每次计算哈希之前重置它，你可以显著减少内存使用和实例化开销。

import { createHash } from 'hash-wasm';

let md5Instance;

async function getOrCreateMD5() {
  if (!md5Instance) {
    md5Instance = await createHash('md5');
  }
  return md5Instance;
}

const calcFileHash = async (file) => {
  return new Promise((resolve, reject) => {
    try {
      // 获取或创建 MD5 实例
      getOrCreateMD5().then(async (md5) => {
        // 使用 FileReader 读取文件为 ArrayBuffer
        const reader = new FileReader();
        reader.onload = async function (e) {
          const arrayBuffer = e.target.result;
          if (arrayBuffer instanceof ArrayBuffer) {
            // 重置哈希对象的状态以便可以再次使用
            md5.reset();
            // 更新哈希对象的内容
            md5.update(new Uint8Array(arrayBuffer));

            // 获取最终的哈希值（十六进制格式）
            const hash = md5.digest('hex');
            console.log(`File ${file.name} hash-wasm MD5 Hash: ${hash}`);
            resolve(hash);
          }
        };

        reader.onerror = function () {
          console.error('Failed to read file:', file.name);
          reject(new Error(`Failed to read file: ${file.name}`));
        };

        // 开始读取文件
        reader.readAsArrayBuffer(file);
      });
    } catch (error) {
      console.error('Failed to compute MD5:', error);
      reject(new Error(`Failed to compute MD5,${error}`));
    }
  });
};

2. 批量处理文件

如果仍然遇到内存问题，可以考虑分批处理文件。这可以通过限制同时进行的文件读取和哈希计算的数量来实现。

export const calcFilesHashWasm = async (files, batchSize = 10) => {
  return new Promise(async (resolve, reject) => {
    try {
      const fileList = Array.from(files);
      if (!Array.isArray(fileList) || fileList.length === 0) {
        resolve([]);
      }

      const results = [];
      for (let i = 0; i < fileList.length; i += batchSize) {
        const batch = fileList.slice(i, i + batchSize);
        const promises = batch.map((file) => calcFileHash(file));
        const batchResults = await Promise.all(promises);
        results.push(...batchResults);

        // 可选：添加短暂延迟以减轻系统负担
        await new Promise(resolve => setTimeout(resolve, 10)); // 例如等待10ms
      }

      resolve(results);
    } catch (error) {
      throw new Error(`计算 MD5 时出错: ${error.message}`, { cause: error });
    }
  });
};

3. 并发控制

除了批量处理外，还可以使用并发控制库（如 p-limit）来限制并发执行的任务数量。这有助于更精细地控制资源使用，特别是在不确定文件大小的情况下。

npm install p-limit
# 或者
yarn add p-limit

然后修改你的代码如下：

import pLimit from 'p-limit';

// 创建一个限制器，最多允许同时运行10个任务
const limit = pLimit(10);

export const calcFilesHashWasm = async (files) => {
  return new Promise(async (resolve, reject) => {
    try {
      const fileList = Array.from(files);
      if (!Array.isArray(fileList) || fileList.length === 0) {
        resolve([]);
      }

      // 使用限制器包装每个文件哈希计算
      const promises = fileList.map((file) => limit(() => calcFileHash(file)));
      const results = await Promise.all(promises);
      resolve(results);
    } catch (error) {
      throw new Error(`计算 MD5 时出错: ${error.message}`, { cause: error });
    }
  });
};

通过上述方法之一或组合使用这些方法，你应该能够有效地处理大量文件的 MD5 哈希计算，而不会遇到内存不足的问题。选择最适合你应用场景的方法进行实施。