Vite中集成Web Workers应使用new URL('./worker.js', import.meta.url)语法，确保worker被自动打包为带哈希的独立chunk并正确部署；避免字符串路径以防构建遗漏和404；可配置manualChunks合并公共依赖，并通过声明文件支持TS类型。
在 Vite 项目中集成 Web Workers 并确保其在生产环境正确构建，关键在于让 Vite 正确识别、打包并生成可部署的 Worker 脚本文件，同时避免常见的路径错误或代码分割问题。
使用 new Worker(new URL(...)) 语法（推荐）
Vite 原生支持通过 new URL('./worker.js', import.meta.url) 动态导入 Worker 脚本。这种方式能被 Vite 的构建系统自动识别，并将 worker 文件作为单独 chunk 打包，生成带哈希的文件名，且在生产环境保留正确的相对路径引用。
示例：
// main.ts
const worker = new Worker(new URL('./my-worker.ts', import.meta.url), {
type: 'module'
});
worker.postMessage({ msg: 'hello' });
✅ 生产构建时，my-worker.ts 会被编译为 assets/my-worker.xxxxxx.js，并自动注入到 index.html 同级目录，加载路径由浏览器根据 import.meta.url 解析，无需手动配置 public 或 base。
立即学习“前端免费学习笔记（深入）”；
避免直接使用字符串路径（如 new Worker('./worker.js')）
该写法不会被 Vite 构建系统捕获，导致：
- worker 文件不参与打包，不会被复制到
dist目录； - 生产环境因路径 404 加载失败；
- 无法享受 TypeScript 类型检查、HMR 和 tree-shaking。
若必须用字符串路径（如兼容旧逻辑），需手动将 worker 文件放入 public/ 目录（如 public/worker.js），再通过 new Worker('/worker.js') 加载 —— 但此时文件不会被构建处理，无压缩、无哈希、无模块支持。
配置 build.rollupOptions.output.manualChunks（可选优化）
默认情况下，Vite 会为每个 Worker 创建独立 chunk。若多个 Worker 共享工具函数，可通过 manualChunks 合并公共依赖：
// vite.config.ts
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
'worker-utils': ['src/workers/utils.ts'],
}
}
}
}
})
注意：仅对通过 import 显式引入的模块生效；Worker 内部的 importScripts 不受此控制。
TypeScript 类型支持与声明文件
为 Worker 主线程通信添加类型提示，建议创建 worker.d.ts：
// src/worker.d.ts
declare module '*.worker.ts' {
class WebWorker extends Worker {
constructor();
}
export default WebWorker;
}
并在 tsconfig.json 中包含：
"include": ["src/**/*.ts", "src/worker.d.ts"]
这样可在主线程中安全使用 const worker = new MyWorker() 并获得 postMessage 类型推导。
