Vite中配置Web Worker的核心是正确导入：✅推荐import Worker from './worker.ts?worker'，自动打包、带哈希、支持TS和HMR；✅替代方案new Worker(new URL('./worker.ts', import.meta.url))符合规范但有局限；⚠️禁用字符串路径new Worker('./worker.js')，否则构建遗漏致404。
在 Vite 中配置和打包 Web Worker，核心是让构建系统识别、编译并正确输出 worker 脚本，同时保障运行时路径可靠、类型安全、依赖可控。不需要额外安装 loader 插件，Vite 原生支持，但写法和细节很关键。
✅ 推荐方式：带 ?worker 后缀的导入语法
这是最简洁、兼容性好、且天然支持 TypeScript 的方式：
- 在主线程中这样写：
import Worker from './my-worker.ts?worker'const worker = new Worker() - Vite 会自动将
my-worker.ts编译为独立 chunk（如assets/my-worker.xxxxxx.js），并注入正确的type="module"配置 - 支持 TS 类型推导（需配好
worker.d.ts声明文件） - 开发时有 HMR，生产时带哈希、可缓存、无 404 风险
✅ 替代方式：new URL() 动态构造（更标准但有局限）
适用于需要更明确控制路径或 worker 内部有复杂 import 的场景：
- 写法：
const worker = new Worker(new URL('./my-worker.ts', import.meta.url), { type: 'module' }) - 优势：符合 WHATWG 规范，路径由浏览器 runtime 解析，不依赖构建时字符串替换
- 注意：若 worker 文件本身 import 了未被 Vite 模块图捕获的资源（如通过字符串拼接引入的模块），可能构建失败；TS 类型需手动补全
⚠️ 必须避免：字符串路径直接 new Worker('./xxx.js')
这种写法在 Vite 中属于“黑盒”，构建系统完全无法感知：
- worker 文件不会被打包进
dist目录 - 生产环境必然 404（除非你手动丢进
public/，但那样就失去压缩、哈希、TS 支持等全部构建能力） - 开发阶段可能侥幸跑通（靠浏览器原生支持），但上线即崩
? 可选优化：合并公共依赖（manualChunks）
当多个 worker 共享工具函数（比如 src/workers/utils.ts），可避免重复打包：
- 在
vite.config.ts中配置：build: { rollupOptions: { output: { manualChunks: { 'worker-shared': ['src/workers/utils.ts'] } } } } - 注意：仅对显式
import的模块生效；worker 内部用importScripts加载的脚本不受影响
只要用对导入方式，Vite 打包 Web Worker 就很稳——不复杂，但路径和后缀这两个点容易忽略。
