close
Guide
Config
Community
Guide
Config
Community

Use Web Workers

This chapter introduces how to configure and use Web Workers in Rsbuild project.

Web Workers

Web Workers are a type of JavaScript program that runs in the background, independently of other scripts, without affecting the performance of the page. This makes it possible to run long-running scripts, such as ones that handle complex calculations or access remote resources, without blocking the user interface or other scripts. Web workers provide an easy way to run tasks in the background and improve the overall performance of web applications.

Use Web Workers

Web Workers are first-class citizens of Rspack, which means you don't need any loader to use web workers directly in Rspack or Rsbuild projects.

For example, create a file called worker.js:

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

Then use this worker in the main thread:

index.js
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);

Loading scripts from remote URLs (cross-origin)

By default, the worker script will be emitted as a separate chunk. This script supports uploading to CDN, but must obey the same-origin policy.

If you want your worker scripts to be accessible across domains, a common solution is to load via importScripts (not subject to CORS), you can refer to the following code:

index.js
1// https://github.com/jantimon/remote-web-worker
2import 'remote-web-worker';
3
4const worker = new Worker(new URL('./worker.js', import.meta.url), {
5  type: 'classic',
6});
7
8worker.onmessage = (event) => {
9  console.log('The results from Workers:', event.data);
10};
11
12worker.postMessage(10);

For detailed discussions on cross-domain issues, please refer to Discussions - webpack 5 web worker support for CORS?

Build Web Workers outputs

Rsbuild supports building Web Workers outputs independently, which is helpful when you need to provide Web Workers outputs for use by other applications.

You can set Rsbuild's output.target configuration to 'web-worker', and Rsbuild will generate build outputs suitable for the Web Workers environment.

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