Vite 通过原生 URL 动态导入机制原生支持 Worker，要求 Worker 必须为独立 TS/JS 模块、导出默认逻辑、禁用主线程 API，并用 new URL() 创建实例以实现独立打包、类型检查与 HMR。
Vite 处理 Worker 线程的加载与编译，关键在于让 Worker 脚本被正确识别、独立打包，并保持与主线程通信能力。它不依赖插件或 loader（如 worker-loader），而是通过原生 URL 动态导入机制实现开箱即用的支持。
Worker 文件必须是独立模块
Vite 要求 Worker 逻辑写在单独的 .js 或 .ts 文件中（例如 worker.ts），不能是内联字符串或匿名函数。这是浏览器规范限制，也是 Vite 能将其作为独立入口处理的前提。
- 文件需导出默认逻辑（通常监听
self.onmessage） - 支持 ES 模块语法：可直接
import工具函数、类型定义、甚至其他 TS 模块 - 禁止访问
window、document、localStorage等主线程专属 API
用 new URL() 正确创建 Worker 实例
主线程中创建 Worker 必须使用 new Worker(new URL('./worker.ts', import.meta.url))。这种方式让 Vite：
- 静态分析路径，自动将其纳入构建图谱
- 为 Worker 单独生成一个 chunk（如
worker.[hash].js） - 保留 TypeScript 类型检查和 HMR 支持
- 避免传统
new Worker('worker.js')导致的 404 或模块解析失败
编译产物与运行时加载分离
Vite 构建后，Worker 文件会被输出到 assets/ 目录下（如 assets/worker.abc123.js），但它的加载方式与普通脚本不同：
立即学习“Java免费学习笔记（深入）”；
- 开发时：通过
import.meta.url动态解析路径，由 Vite 开发服务器提供服务 - 生产时：Vite 自动注入正确的相对路径或 public 目录引用，确保 Worker 脚本能被浏览器正确 fetch
- 不参与主应用的代码分割或懒加载链路，始终作为独立资源存在
支持 TypeScript 和热更新（HMR）
Worker 文件可用 .ts 后缀，Vite 默认启用类型检查。若希望开发时修改 Worker 逻辑后自动重载：
- 在 Worker 文件末尾添加：
if (import.meta.hot) import.meta.hot.accept() - 主线程中监听变更并重建 Worker：
import.meta.hot?.accept('./worker.ts', () => { oldWorker?.terminate(); worker = new Worker(new URL('./worker.ts', import.meta.url)); }) - 注意：需手动管理旧 Worker 的销毁，防止内存泄漏
不复杂但容易忽略
