在 web worker 中使用 es modules 必须显式指定 type: "module",否则含 import 会报错;支持静态 import 和动态 import(),路径相对 worker 文件,不兼容 importscripts;chrome 80+ 等新版浏览器支持,旧版需回退。

在 Web Worker 中使用 ES Modules,关键在于创建时指定 type: "module",而不是在 Worker 脚本里写 import 就能自动生效。
创建模块化 Worker 的正确方式
必须在主线程中用 new Worker(url, { type: "module" }) 显式声明,否则即使脚本里写了 import 也会报错“Cannot use import statement outside a module”。
- 支持静态
import语句,如import { helper } from './utils.js' - 模块路径是相对于 Worker 文件 URL 的,不是 HTML 页面
- 不支持
importScripts()和import混用;一旦启用模块模式,importScripts会直接抛异常 - 浏览器会等待整个模块图加载、实例化、求值完成后才执行 Worker 主体代码(类似
<script type="module"></script>的行为)
动态导入 import() 在模块 Worker 中可用
在已启用 type: "module" 的 Worker 内,可随时使用 import() 进行按需、异步加载,比如响应计算任务类型或环境特征。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
-
import()返回 Promise,可在async函数中用await - 路径支持变量和模板字符串,适合条件加载:例如根据是否支持
Atomics.wait加载不同算法实现 - 加载失败会 reject,建议配合
try/catch处理降级逻辑
兼容性与回退方案
Chrome 80+、Firefox 79+、Safari 15.4+ 支持模块 Worker;旧版浏览器只能退回 importScripts 方式。
- 可通过特性检测判断:
if (typeof Worker !== 'undefined' && 'module' in Worker.prototype) - 构建时可输出两套 Worker:一个带
type="module",另一个用importScripts包装相同逻辑 - 避免在模块 Worker 中依赖全局变量,因为模块作用域天然隔离,所有依赖必须显式
import
常见错误提醒
以下操作会导致运行时报错,需特别注意:
- 用
new Worker('worker.js')启动,但worker.js里含import—— 缺少{ type: "module" }选项 - Worker 文件用了
export却没被模块方式加载 —— 导出内容无法被访问,也不会报错,但逻辑失效 - 在非模块 Worker 中调用
import()—— 语法错误,import()只在模块上下文合法 - 跨域模块脚本未配 CORS 头 —— 加载失败,且错误信息较隐蔽(常表现为 Promise rejected 无具体原因)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










