如何阻止WebPack开发服务器尝试处理Worker Blob URL

我正在调整Web Worker池的使用方式，目的是消除生产环境中的冗余服务器请求。

现有方案是直接加载Worker：

const worker = new Worker(`${src}?v=${version}`);

每个Worker池会执行N次这个操作，Webpack在开发环境下没问题，但生产环境里这N次请求完全冗余，既浪费资源又增加不必要的延迟。

于是我尝试通过缓存/防抖的fetch()加载Worker代码，再用Blob URL传入Worker：

const worker = getBundleBlobURI(src).then(uri => {
    return new Worker(uri);
});

Worker功能正常，但本地开发时，Webpack开发服务器反复尝试连接ws://0.0.0.0:9999/ws失败，控制台被错误信息刷屏。

目前临时方案是仅在预发布和生产环境使用Blob：

const isLocal = checkIfHostnameIsLocalhost(); // 大致判断逻辑

if (isLocal) {
  const worker = new Worker(src);
} else {
  const worker = getBundleBlobURI(src).then(uri => {
    return new Worker(uri);
  });
}

但开发和生产环境代码不一致，可能导致后期（甚至生产环境）出现严重的缓存回归问题。

解决方案 #

1. 给Blob URL注入Webpack热更新WebSocket配置 #

Webpack开发服务器的热更新依赖WebSocket，但Blob URL的blob:协议上下文无法自动继承页面的WebSocket配置。可以在fetch到Worker代码后，手动添加WebSocket连接配置：

async function getBundleBlobURI(src) {
  const response = await fetch(src);
  let code = await response.text();
  
  // 仅在开发环境注入配置
  if (checkIfHostnameIsLocalhost()) {
    const wsUrl = `ws://${window.location.hostname}:9999/ws`;
    // 注入WebSocket连接逻辑，覆盖Webpack默认自动连接
    code = `
      __webpack_public_path__ = window.location.origin + '/';
      new WebSocket('${wsUrl}').onopen = () => {
        console.log('Worker WebSocket connected');
      };
      ${code}
    `;
  }
  
  const blob = new Blob([code], { type: 'application/javascript' });
  return URL.createObjectURL(blob);
}

这样Worker就能正确连接到Webpack热更新服务，不再出现连接失败错误。

2. 使用Webpack专用Loader处理Worker #

直接用Webpack的worker-loader或asset/resource规则处理Worker文件，它会自动适配开发环境热更新和生产环境缓存优化，彻底避免手动区分环境的问题：

安装依赖：

npm install worker-loader --save-dev

配置Webpack规则：

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

使用时直接导入Worker：

import MyWorker from './my.worker.js';

// Webpack自动处理缓存、热更新，无需手动逻辑
const worker = new MyWorker();

3. 禁用Worker中的Webpack热更新逻辑 #

如果不需要Worker的热更新功能，可以直接移除代码中的热更新相关片段：

async function getBundleBlobURI(src) {
  const response = await fetch(src);
  let code = await response.text();
  
  if (checkIfHostnameIsLocalhost()) {
    // 移除Webpack热更新相关代码
    code = code.replace(/__webpack_hmr__.*?;/g, '');
  }
  
  const blob = new Blob([code], { type: 'application/javascript' });
  return URL.createObjectURL(blob);
}

这种方式简单直接，但会丢失Worker的热更新能力，适合对开发效率要求不高的场景。

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