vite原生支持web worker，需用new url+type:'module'加载独立js文件，通过结构化克隆通信，合理管理生命周期并注意构建时路径与依赖处理。
在 Vite 项目中使用 Web Worker，核心是让耗时计算脱离主线程，避免阻塞 UI。Vite 原生支持 Web Worker，无需额外插件，但需注意加载方式、模块类型和通信结构。
1. 创建 Worker 脚本并正确加载
Vite 要求 Worker 脚本必须是独立的 `.js` 文件（不能内联），且路径需同源。推荐使用 构造函数 + 模块导入 方式，适配 ES 模块语法：
- 新建
src/workers/math-worker.js：
self.onmessage = function (e) {
const { data } = e;
let sum = 0;
for (let i = 0; i - 在组件或逻辑中创建 Worker：
const worker = new Worker(new URL('./workers/math-worker.js', import.meta.url), {
type: 'module' // 必须显式声明，否则报错
});
worker.postMessage(1000000);
worker.onmessage = (e) => {
console.log('计算结果:', e.data.result);
};⚠️ 注意：import.meta.url 是关键，它确保路径在开发和生产环境都有效；省略 { type: 'module' } 会触发 MIME 类型错误。
2. 处理复杂数据与结构化通信
Worker 间传递的数据经结构化克隆，支持对象、数组、ArrayBuffer，但不支持函数、Date、RegExp 或 DOM 节点。高频场景建议用 消息协议 明确指令类型：
- 主线程发送：
worker.postMessage({
cmd: 'sort',
payload: largeArray,
id: Date.now()
});- Worker 中解析：
self.onmessage = (e) => {
const { cmd, payload, id } = e.data;
if (cmd === 'sort') {
const sorted = payload.sort((a, b) => a - b);
self.postMessage({ cmd: 'sorted', id, result: sorted });
}
};这样可复用一个 Worker 实例处理多种任务，减少频繁创建销毁开销。
3. 合理管理生命周期与资源
Worker 线程常驻内存，不自动释放。长期运行或一次性任务需主动控制：
- 任务完成即关闭：Worker 内调用
self.close()； - 主线程终止：不再需要时调用
worker.terminate()； - 异常兜底：监听
worker.onerror并做清理； - 避免滥用：单页应用中通常 1–3 个专用 Worker 足够，共享 Worker 更适合跨 tab 场景。
例如，在 React 组件卸载或 Vue onUnmounted 钩子中执行：
onUnmounted(() => {
if (worker) worker.terminate();
});4. 构建时的注意事项
Vite 在构建阶段会自动识别 new Worker(...) 并打包 Worker 脚本为独立 chunk。但以下情况需手动干预：
- 动态路径（如拼接字符串）会导致构建失败 → 始终用
new URL(..., import.meta.url)； - Worker 中需引入第三方库（如
lodash）→ 使用importScripts或改用import（需type: 'module'）； - 调试困难 → 浏览器开发者工具的 Application → Service Workers 或 Threads 面板可查看 Worker 实例与日志。
不复杂但容易忽略。用对方式，主线程就能专注渲染和交互，Worker 安静干活。
