本文详解如何解决使用 new Worker(..., { type: 'module' }) 时因 Blob MIME 类型缺失导致的“Failed to load module script”错误，并提供可直接复用的模块化 Worker 构建方案。
本文详解如何解决使用 `new worker(..., { type: 'module' })` 时因 blob mime 类型缺失导致的“failed to load module script”错误，并提供可直接复用的模块化 worker 构建方案。
在 React（或其他现代前端项目）中，为实现真正的后台文件上传、避免主线程阻塞，常需借助 Web Worker。但当启用模块模式（{ type: 'module' }）时，若 Worker 脚本通过 Blob URL 动态生成，浏览器会严格校验响应 MIME 类型——而默认 Blob 构造未显式指定类型时，其 MIME 为 ""（空字符串），触发 HTML 规范强制的模块脚本 MIME 检查失败，报错：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "".
根本原因并非 import 语法本身不被支持（ES 模块 Worker 完全支持 import），而是 Blob 对象缺少正确的 type 选项，导致生成的 URL 被解析为非模块资源。
✅ 正确做法是：在创建 Blob 时显式声明 type: 'application/javascript'，确保浏览器识别其为合法的 JS 模块资源：
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
// workerBuilder.js
export function getWorker(worker) {
const code = worker.toString();
// ✅ 关键修复：显式设置 MIME 类型
const blob = new Blob([`(${code})()`], { type: 'application/javascript' });
return new Worker(URL.createObjectURL(blob), { type: 'module' });
}⚠️ 注意事项：
-
type: 'application/javascript'是必需的；'text/javascript'或省略均无效； -
worker.toString()仅提取函数体，无法保留外部import语句——因此fileUploadWorker.js中的import { uploadFile } ...在 Blob 内将失效（uploadFile未定义）； - 解决依赖问题的推荐方式：将依赖逻辑内联或通过构造参数注入，例如改用
importScripts（适用于传统 Worker）或更优解——预构建 Worker 入口为独立.js文件并使用import.meta.url动态加载。
? 推荐生产级实践（避免 Blob + import 失效）：
- 将 Worker 代码单独保存为
fileUploadWorker.mjs（注意扩展名）； - 使用
new Worker(new URL('./fileUploadWorker.mjs', import.meta.url), { type: 'module' })直接加载； - 若需动态传参，可通过
postMessage传递必要配置，而非尝试在 Blob 中拼接import。
总结：Blob 的 type 选项是启用模块化 Worker 的前提；但动态 Blob 方案天然不支持原生 import，应优先采用标准模块文件加载方式以保障依赖正确解析与长期可维护性。
