本文详解如何修复 Web Worker 以 type: 'module' 方式加载时因 Blob MIME 类型缺失导致的“Failed to load module script”错误，并提供可直接落地的 React 工具函数与模块化 Worker 实践方案。
本文详解如何修复 web worker 以 type: 'module' 方式加载时因 blob mime 类型缺失导致的“failed to load module script”错误，并提供可直接落地的 react 工具函数与模块化 worker 实践方案。
在现代前端开发中，使用模块化 Web Worker（即 new Worker(..., { type: 'module' })）可安全导入 ES 模块依赖（如工具函数、枚举、第三方库），显著提升代码复用性与可维护性。但一个常见陷阱是：通过 Blob 动态生成 Worker 脚本时，若未显式指定 MIME 类型，浏览器将无法识别其为合法 JavaScript 模块，从而抛出严格 MIME 校验错误：
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "".
该错误的根本原因在于：new Blob([source]) 默认不设置 type 选项，导致生成的 Blob 对象 MIME 类型为空字符串（""）。而模块 Worker 要求脚本必须具有明确的 application/javascript（或 text/javascript）类型，否则浏览器拒绝执行。
✅ 正确做法是：在创建 Blob 时显式传入 type: 'application/javascript'。同时需确保 Worker 内部代码本身符合模块语法（含 import/export），且运行环境支持模块 Worker（Chrome 80+、Firefox 79+、Safari 16.4+ 等主流浏览器均已支持）。
以下是修复后的 workerBuilder.js：
// workerBuilder.js
export function getWorker(worker) {
const code = worker.toString();
// ✅ 关键修复：显式声明 MIME 类型为 application/javascript
const blob = new Blob([`(${code})()`], { type: 'application/javascript' });
return new Worker(URL.createObjectURL(blob), { type: 'module' });
}
对应的 fileUploadWorker.js 保持原样即可（注意：它本身已是 ESM 格式）：
// fileUploadWorker.js
import { uploadFile } from 'utilities/storage.utils';
import { STORAGE_BUCKET_ENUM } from 'models/application/enums/ImageEnums';
export default () => {
self.onmessage = async (e) => {
const { file, filePath } = e.data;
try {
const result = await uploadFile(file, STORAGE_BUCKET_ENUM.ATTACHMENTS, filePath);
self.postMessage(result ? 'File uploaded' : 'Could not upload');
} catch (err) {
self.postMessage(`Upload error: ${err.message}`);
}
};
};
使用方式不变：
// 在组件或业务逻辑中
import { getWorker } from './workerBuilder';
import fileUploadWorker from './fileUploadWorker';
const worker = getWorker(fileUploadWorker);
worker.postMessage({ file, filePath });
worker.onmessage = (e) => {
console.log('Worker result:', e.data);
};
worker.onerror = (e) => {
console.error('Worker error:', e);
};
⚠️ 注意事项：
-
路径解析限制：模块 Worker 中的
import路径必须为相对路径（如'./utils.js'）或绝对 URL（如'https://cdn.com/lib.mjs'），不支持 Node.js 风格的包名导入（如'utilities/storage.utils'） —— 这类路径需由构建工具（如 Vite、Webpack）在打包阶段解析并转为有效 URL。确保你的构建配置已正确处理 Worker 内部的模块导入。 -
作用域隔离：Worker 全局对象是
self，而非window；不可访问 DOM、localStorage等主线程专属 API。 -
内存管理：务必在任务完成后调用
worker.terminate()释放资源，尤其在频繁创建 Worker 的场景下。 -
调试建议：可通过
console.log(self.location.href)在 Worker 内打印当前脚本 URL，辅助验证模块加载路径是否正确。
综上，只需一行关键修改（显式设置 Blob MIME 类型），即可让模块化 Web Worker 稳定运行，真正实现文件上传等耗时操作的完全后台化，避免阻塞主线程渲染与交互。
