#Web Workers

本文将介绍在 Rsbuild 项目中如何配置和使用 Web Workers。

#使用 Web Workers

#使用 Worker 构造器

Rspack 提供了对 Web Workers 的内置支持，这意味着你不需要任何的 Loader 就可以直接在 Rsbuild 项目中使用 Web Workers。

例如，创建一个名为 worker.js 的文件：

self.onmessage = (event) => {  const result = event.data * 2;  self.postMessage(result); };

然后在主线程中使用这个 worker：

const worker = new Worker(new URL('./worker.js', import.meta.url));  worker.onmessage = (event) => {  console.log('The results from Workers:', event.data); };  worker.postMessage(10);

Rspack 默认支持多种 Worker 语法，查看 Rspack - Web Workers 了解更多。

#使用 worker-loader

如果你的项目已经在使用 worker-loader，或者希望使用 worker-loader 的 inline 等能力，在 Rsbuild 项目中可以使用 worker-loader 的替代方案 worker-rspack-loader。

export default {  tools: {  rspack: {  resolveLoader: {  alias: {  // 修改内联 loader 中 worker-loader 的指向  // 如 `worker-loader!pdfjs-dist/es5/build/pdf.worker.js`  'worker-loader': require.resolve('worker-rspack-loader'),  },  },  module: {  rules: [  {  test: /\.worker\.js$/,  loader: 'worker-rspack-loader',  },  ],  },  },  }, };

使用 worker-rspack-loader 时，需要使用 import 来引入 Web Worker 文件，而不是 new Worker('/path/to/worker.js')。

import Worker from './file.worker.js';  const worker = new Worker();  worker.postMessage({ a: 1 });

worker-loader 已不再维护，如果你没有内联 Web Workers 的需求，推荐使用 new Worker() 语法。

#从远程 URL 加载脚本

默认情况下，worker 脚本会输出成一个独立的 chunk。worker 脚本支持上传到 CDN，但在加载远程脚本时需要遵守同源策略。

如果你希望你的 worker 脚本可以跨域访问，常见解法是通过 importScripts (不受 CORS 约束) 加载，可参考如下代码：

// https://github.com/jantimon/remote-web-worker import 'remote-web-worker';  const worker = new Worker(new URL('./worker.js', import.meta.url), {  type: 'classic', });  worker.onmessage = (event) => {  console.log('The results from Workers:', event.data); };  worker.postMessage(10);

关于跨域问题的详细讨论可参考 Discussions - webpack 5 web worker support for CORS?

#浏览器兼容性

当你的应用中既包含主线程代码，也包含通过 new Worker 创建的 Web Worker 时，需要注意：由于 Web Worker 运行在独立的线程中，与主线程环境隔离，Rsbuild 提供的 polyfill entry 方案 无法在 Web Worker 中生效。此时，建议改用 usage 方案，为 Web Worker 单独注入所需的 polyfill 代码。

export default {  output: {  polyfill: 'usage',  }, };

#独立构建

Rsbuild 支持独立构建 Web Workers 产物。当你需要为 Web Workers 配置独立的构建选项，或将 Web Workers 提供给其他应用使用时，可以使用以下方法。

将 Rsbuild 的 output.target 配置项设置为 'web-worker'，即可生成运行在 Worker 线程的构建产物。

export default {  output: {  target: 'web-worker',  }, };

使用 environments 来同时构建 Web Workers 与主应用：

export default {  environments: {  web: {  // 主应用的构建配置  },  webWorker: {  // Web Workers 的构建配置  output: {  target: 'web-worker',  },  },  }, };