核心是让类型支持、模块解析、构建输出和运行时实例化四者对齐：必须用new URL()或?worker导入，配置worker.format为'es'或'iife'，补全worker.d.ts声明，并确保服务器正确返回.mjs的MIME类型。
在 TypeScript 项目中用 Vite 正确加载 Web Worker，核心是让类型支持、模块解析、构建输出和运行时实例化四者对齐。不配好，轻则 TS 报错、HMR 失效，重则生产环境 404 或 MIME 错误。
确保 Worker 文件被 Vite 识别为独立模块
Vite 只对特定导入方式做自动打包处理。必须使用以下任一方式：
-
new URL() 构造方式：最推荐，语义清晰且天然支持类型推导和哈希文件名
const worker = new Worker(new URL('./calc.worker.ts', import.meta.url), { type: 'module' }); -
?worker 查询后缀导入：适合需要复用 Worker 构造器的场景
import CalcWorker from './calc.worker.ts?worker';<br>const worker = new CalcWorker();
⚠️ 避免直接写字符串路径（如 new Worker('./calc.js')），Vite 不会捕获该引用，导致文件不进 dist、无压缩、无类型检查。
配置 worker.format 匹配运行环境
在 vite.config.ts 中显式设置格式，影响打包产物形态和浏览器加载行为：
-
format: 'es'（推荐现代项目）：输出
.mjs文件，支持import/export、tree-shaking 和 HMR；需配合{ type: 'module' }使用；要求 Chrome 105+ / Firefox 111+ / Safari 16.4+ -
format: 'iife'（兼容旧环境）：输出
.js，自执行函数包裹，无需type: 'module'，但无法直接用import，需改用importScripts()
配置示例：
Scrapfly SDK TypeScript
下载
使用 Scrapfly SDK（scrapfly-sdk）在 TypeScript 或 JavaScript 中进行网页抓取，用于用户请求抓取 URL、绕过反爬虫防护、渲染页面等场景。
export default defineConfig({<br> worker: { format: 'es' }<br>});
补全 TypeScript 类型声明
否则 TS 会报 Cannot find module '*.worker.ts'。在项目根目录或 src/ 下新建 worker.d.ts：
declare module '*.worker.ts' {<br> const worker: WorkerConstructor;<br> export default worker;<br>}
如果 Worker 内部使用了全局变量（如 self），可在 tsconfig.json 的 compilerOptions.lib 中加入 "WebWorker"，确保类型可用。
注意构建产物部署细节
特别是 format: 'es' 时：
- 生成文件后缀为
.mjs（如assets/calc.xxxxxx.mjs） - 服务器必须返回正确的 MIME 类型：
application/javascript，否则会触发 CORS 或 MIME 类型错误 - Nginx 示例配置：
location ~ \.mjs$ { add_header Content-Type application/javascript; } - Vercel/Netlify 等平台默认支持，一般无需额外配置
