为何new Worker('./worker.js')失败，带URL对象的Worker写法却可行？

核心原因是浏览器原生Worker的路径解析规则，和打包器的资源处理逻辑不匹配，具体区别如下：

两种写法的本质差异 #

1. 字符串路径写法（new Worker('./worker.js')） #

浏览器会以当前页面的URL为基准解析这个相对路径，而非当前JS文件的路径。在未经过打包的原生环境中（比如MDN的示例场景），页面和脚本文件结构简单，相对路径能直接匹配到worker文件，所以可以正常运行。但经过打包器处理后，代码会被拆分、输出到不同的目录结构（比如dist下的chunk文件），此时页面URL和脚本文件的实际位置不再对应，相对路径就会指向错误的位置，导致Worker加载失败。

2. URL对象写法（new Worker(new URL('./worker.js', import.meta.url))） #

import.meta.url代表当前JS模块的绝对URL，以此为基准创建的URL对象，会生成相对于当前模块文件的绝对路径。打包器（Vite、Webpack、Snowpack、Parcel等）会静态分析这种写法，将worker文件识别为依赖资源，自动处理它的打包、复制到输出目录，并在编译时替换为打包后的正确URL，确保运行时能正确找到worker文件。

打包器的处理逻辑 #

几乎所有现代打包器都要求使用URL对象写法，因为：

• 打包器需要静态识别worker文件的依赖关系，才能将其纳入打包流程；
• 字符串路径无法被打包器可靠解析（可能被当作普通字符串处理），导致worker文件不会被打包，或者路径错误；
• URL对象写法明确告诉打包器：这是一个需要处理的资源路径，从而触发对应的打包逻辑。

MDN示例的场景说明 #

MDN的文档示例针对的是原生浏览器环境，没有涉及打包器的处理流程，此时页面与脚本的路径关系简单，字符串相对路径可以直接生效，所以文档中始终以字符串字面量作为示例。

内容的提问来源于stack exchange，提问作者Qiulang