Vite项目中如何将Web Worker打包进单文件，避免运行时加载外部Worker？

完全可以实现将Web Worker逻辑整合到最终的单个index.js中，无需运行时加载外部Worker文件，下面是两种实用方案：

方案一：直接内联Worker代码到主文件 #

把Worker的处理逻辑以字符串形式嵌入主文件，通过Blob生成URL来创建Worker，全程不需要额外文件：

// 主文件 index.js
// 直接编写Worker的逻辑代码
const workerLogic = `
self.onmessage = (event) => {
  // 这里写Worker的业务处理逻辑
  const computedResult = event.data.map(item => item * 3);
  self.postMessage(computedResult);
};
`;

// 生成Blob URL并创建Worker实例
const workerBlob = new Blob([workerLogic], { type: 'application/javascript' });
const myWorker = new Worker(URL.createObjectURL(workerBlob));

// 与Worker通信示例
myWorker.postMessage([1, 2, 3]);
myWorker.onmessage = (res) => {
  console.log('Worker返回结果:', res.data); // 输出 [3,6,9]
};

这种方式最直接，所有代码都在主文件内，打包后自然合并到index.js。

方案二：用Vite的?inline导入语法拆分代码（更易维护） #

如果Worker逻辑复杂，想单独写在一个文件里但打包时内联，可以用Vite原生支持的?inline后缀导入：

1. 单独创建Worker文件（比如calc.worker.js）：

// calc.worker.js
self.onmessage = (e) => {
  const sum = e.data.reduce((acc, curr) => acc + curr, 0);
  self.postMessage(sum);
};

2. 在主文件中用?inline导入这个文件的内容：

// 主文件 index.js
import workerCode from './calc.worker.js?inline';

// 用导入的代码生成Blob URL创建Worker
const workerBlob = new Blob([workerCode], { type: 'application/javascript' });
const calcWorker = new Worker(URL.createObjectURL(workerBlob));

// 通信示例
calcWorker.postMessage([10, 20, 30]);
calcWorker.onmessage = (res) => {
  console.log('求和结果:', res.data); // 输出 60
};

打包时Vite会把calc.worker.js的内容直接内嵌到主打包文件中，不会生成单独的Worker文件。

注意事项 #

• 若不需要保留Blob URL，可在Worker使用完毕后调用URL.revokeObjectURL(blobUrl)释放资源，浏览器也会在Worker终止后自动清理
• 两种方案最终都只会生成单个index.js，部署时只需发布这一个文件即可

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