在 vite 中使用 worker 执行密集计算，核心是用 new worker(new url('./worker.js', import.meta.url)) 正确创建并打包，通过 postmessage/onmessage 通信，支持 ts 和 hmr，需避免访问 dom、妥善管理生命周期与错误。
在 Vite 中使用 Worker 线程执行密集型计算任务，核心是**正确创建、加载和通信**，同时避免常见打包陷阱（比如直接 new Worker() 导致路径错误或模块解析失败）。
1. 使用 new Worker(new URL(...)) 动态导入 Worker 文件
Vite 推荐用 new URL('./worker.js', import.meta.url) 方式创建 Worker。这种方式让 Vite 能识别并正确打包 Worker 文件（包括支持 ES 模块、TypeScript、甚至 import 语句），且路径始终正确。
- Worker 文件必须是独立的 JS/TS 文件（不能是内联字符串或匿名函数）
- 确保 Worker 文件中不访问 window、document 等主线程专属 API
- 如果 Worker 需要导入其他模块（如工具函数），可直接用
import，Vite 会自动处理依赖打包
2. 主线程与 Worker 通过 postMessage / onmessage 通信
Worker 是完全隔离的上下文，数据传递靠结构化克隆（默认）或 Transferable（如 ArrayBuffer，可零拷贝）。对大数组、图像数据等，优先用 Transferable 提升性能。
- 主线程发送：worker.postMessage(data, [transferList])
- Worker 接收：self.onmessage = ({ data }) => { ... }
- Worker 发送结果：self.postMessage(result, [transferList])
- 注意：函数、Promise、DOM 节点等无法序列化，不能直接传
3. 支持 TypeScript 和热更新（HMR）的写法
Worker 文件可用 .ts 后缀，Vite 默认支持。若希望 Worker 在开发时随代码变化自动重载，可在主线程中监听 HMR 并重建 Worker：
- 在 Worker 文件末尾加
if (import.meta.hot) import.meta.hot.accept() - 主线程中监听
import.meta.hot?.accept('./worker.ts', () => {...})，触发时销毁旧 Worker、新建新 Worker - 实际项目中需管理 Worker 生命周期（如取消 pending 任务、避免内存泄漏）
4. 处理报错与调试技巧
Worker 报错不会打断主线程，但容易被忽略。建议统一监听 error 事件：
- 主线程：worker.onerror = e => console.error('Worker error:', e)
- Worker 内部：self.onerror = e => console.error('Worker unhandled error:', e)
- Chrome DevTools 的 Sources 面板下可看到 Workers 标签页，支持断点调试
- 避免在 Worker 中使用 console.log —— 输出会出现在 Console，但位置标识为 “worker.js”
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
