在single-spa React微前端中无法使用web worker如何解决？

报错根因说明 #

• 第一种经典写法的404错误：webpack没有识别到普通Worker写法的引入依赖，不会将worker.js单独打包输出到部署目录，根路径下自然找不到对应文件
• 第二种webpack写法的跨域错误：single-spa场景下子应用静态资源托管在独立的服务端口，而Worker加载要求脚本和当前页面同源，直接加载跨域端口的Worker脚本会被浏览器拦截

前置依赖确认 #

• webpack版本 >= 5，Webpack5原生支持Worker构造器的URL写法，无需额外安装worker-loader
• worker.js文件放在src目录下，和引入它的root.component.js相对路径正确

解决步骤 #

第一步：配置静态资源跨域响应头 #

开发环境在子应用webpack配置的devServer节点添加如下配置：

// webpack.config.js
module.exports = {
  // 其他原有配置保留
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*', // 生产环境建议替换为主应用实际域名，提升安全性
    }
  }
}

生产环境在静态资源服务（如Nginx）的配置中添加对应响应头即可：

add_header Access-Control-Allow-Origin *;

第二步：使用跨域兼容的Worker初始化方式 #

原生Worker不支持跨域脚本加载，通过Blob转成同源URL的方式绕开限制，修改初始化代码：

// root.component.js
import { useEffect } from 'react';

// 封装Worker初始化方法
const initCrossOriginWorker = async () => {
  const workerScriptUrl = new URL('./worker.js', import.meta.url);
  // 先通过fetch拉取跨域的Worker脚本
  const res = await fetch(workerScriptUrl);
  const scriptBlob = await res.blob();
  // 生成同源的Blob URL初始化Worker
  return new Worker(window.URL.createObjectURL(scriptBlob));
}

// 组件中调用示例
useEffect(() => {
  let myWorker;
  const runWorker = async () => {
    myWorker = await initCrossOriginWorker();
    // 正常收发消息即可
    myWorker.postMessage('init success');
    myWorker.onmessage = (e) => {
      console.log('Worker返回数据：', e.data);
    }
  }
  runWorker();
  // 组件卸载销毁Worker
  return () => {
    myWorker?.terminate();
  }
}, [])

注意事项 #

• Worker运行在独立线程，无DOM API，不要在worker.js中引入和window、document、React相关的代码
• 生产环境打包时需确认webpack的publicPath配置为子应用实际的静态资源访问地址

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