React应用Web Worker生产环境失效，报Bd未定义错误求助

问题原因 #

本地开发环境代码未经过压缩混淆，通过worker.toString()提取的代码能在Blob环境中正常运行；但生产环境构建时（Webpack/Vite等工具默认会开启代码压缩），会将变量名、函数名混淆为短标识符（比如Bd），而Blob创建的Worker是独立运行环境，这些混淆后的标识符依赖的上下文并没有被带入其中，最终导致运行时抛出ReferenceError。

解决方案1：直接导入Worker文件（推荐） #

放弃动态Blob生成Worker的方式，使用标准的Worker文件导入逻辑，从根源避免代码混淆带来的问题：

1. 改造FetchingImagesWorker.js，去掉外层函数包裹，直接编写Worker逻辑：

// FetchingImagesWorker.js
self.onmessage = async (event) => {
  // 原有的Worker业务逻辑
};

2. 根据你的构建工具，在React组件中导入Worker：

• Webpack环境：使用worker-loader或Webpack 5内置Worker支持

// React组件中
import Worker from './FetchingImagesWorker.js';

const worker = new Worker();

Webpack 5配置示例：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' },
      },
    ],
  },
};

• Vite环境：Vite原生支持Worker导入，直接添加?worker后缀：

// React组件中
import Worker from './FetchingImagesWorker.js?worker';

const worker = new Worker();

解决方案2：禁止构建工具混淆Worker相关代码 #

如果必须保留Blob生成Worker的逻辑，可配置构建工具不对Worker相关代码进行混淆压缩：

针对Terser（Webpack/Vite默认压缩工具）

1. 在Worker相关文件顶部添加注释标记，跳过压缩：

/* terser-disable */
export default class CreateWebWorker {
  // 原有代码
}

/* terser-disable */
export default function FetchingImagesWorker() {
  self.onmessage = async (event) => {
    // 原有逻辑
  }
}

2. 或在构建配置中指定保留特定函数/类名：
   Webpack Terser配置示例：

// webpack.config.js
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          keep_fnames: /FetchingImagesWorker/,
          keep_classnames: /CreateWebWorker/,
        },
      }),
    ],
  },
};

解决方案3：用IIFE包裹Worker代码（临时兼容方案） #

修改CreateWebWorker逻辑，将提取的代码用立即执行函数包裹，隔离混淆后的变量作用域：

export default class CreateWebWorker {
  constructor(worker) {
    let code = worker.toString();
    code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'));
    // 用IIFE包裹代码，避免混淆变量泄漏
    const wrappedCode = `(() => { ${code} })()`;
    const blob = new Blob([wrappedCode], { type: 'application/javascript' });
    return new Worker(URL.createObjectURL(blob));
  }
}

注：此方案仅能解决部分混淆问题，优先推荐方案1。

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