worker support

[hardfist]

Worker

Preview Give feedback

1. support chunkLoading per entrypoint #3552
   feat pending triage team +3
   
2. AsyncEntrypoint #3073
   team +1
3. ImportScriptChunkLoading (feat: add ImportScriptsChunkLoadingPlugin #2839)
4. WorkerDependency #3074
   p1-important team +2
5. Can't resolve ./worker.js in './index.js' when treeShaking enabled #3658
   bug pending triage team +3
6. fix: resolve worker without extension #3702
   release: bug fix team +2
7. fix: worker chunk looses runtime modules in incremental rebuild #3703
   release: bug fix team +2
8. fix: worker HMR #3711
   release: bug fix team +2
9. fix: react refresh in async entrypoint #3731
   release: bug fix team +2
10. webpackEntryOptions magic comments #3680
    stale team +2
11. custom worker syntax #3656
    feat team +2
12. call syntax for worker #3686
    team +1
    

[thecodrr]

worker-loader is required for basically any kind of Web Workers support so I think this should be high on the priority list.

[beaucollins]

webpack says not to use worker-loader any more https://webpack.js.org/guides/web-workers/#syntax

We use the method describe in those docs but that is also broken with rspack.

[ahabhgk]

Rspack currently not support web-worker or worker-loader, but we will work on supporting them later.

[thecodrr]

@beaucollins that method doesn't work on Firefox because there's no ESM support for Web Workers yet. Bundling is the only reliable way to make web workers work across browsers.

[beaucollins]

@thecodrr webpack replaces the import.meta.url with a static string. Firefox handles it just fine. esm isn't involved in the bundled code.

[beaucollins]

Looks like #2340 will solve this for us. I'll report back.

[towavephone]

Look like #2340 can't resolve the web worker as the same with webpack 5:
Uncaught SyntaxError: Cannot use import statement outside a module
there always exists some extra file need to be imported except set the worker.js to type: module?

[beaucollins]

I can confirm that we can successfully use our worker code using rspack and the new URL('Module.ts', import.meta.url) syntax.

And yes, @thecodrr this also works in Firefox since the bundle output does not actually use ESM.

[birtles]

I can confirm that we can successfully use our worker code using rspack and the new URL('Module.ts', import.meta.url) syntax.

I'm not sure what I'm doing differently.

With the following code using rspack 0.1.7, I get the TS file simply copied, untransformed (but renamed), to the output directory:

const dbWorker = new Worker(
  /* webpackChunkName: 'db-worker' */
  new URL('../db-worker/db-worker.ts', import.meta.url)
);

[beaucollins]

@birtles it seems I spoke too soon. The builds work but the Worker based feature is not.

[felixmosh]

I've the same issue as @birtles has, I would expect that a new entry will be added (with the path of the worker file path) dynamically with a worker target, so if the worker file path has imports it will be bundled together as it works in Webpack.

[pushkargupta9807]

a gentle follow-up, do we have an approx ETA for this fix?

[pushkargupta9807]

Do we have a patch/ experimental branch for this fix I can try ?

[hardfist]

Do we have a patch/ experimental branch for this fix I can try ?

it is not supported now, we will support it soon

[ssddi456]

so if there is a milestone? this is a important feature for many complex system

[ahabhgk]

I'm working on it, will support it in the next one or two weeks

[felixmosh]

@ahabhgk I've tested v0.2.5 with the worker, looks like it splits the worker script into a separate file, but it is not bundling it's imports inside this bundle.

// some code
highlightWorker = new Worker(
        new URL('./worker.ts', import.meta.url)
);

// worker.ts
import config from './config'; // this file is not bundled inside the chunk that was created for worker.ts

console.log(config)

[ahabhgk]

@felixmosh Is there any runtime error? Could you provide a reproduction so I can dig into this

[felixmosh]

@ahabhgk this is weird, with the rspack starter, it works properly.

On my project, it throws,

You can try this branch: https://github.com/felixmosh/bull-board/tree/ui-with-rspack

yarn install
yarn start:dev

make sure you have radis running on a default port (via Docker or other)

[zackarychapple]

Love seeing worker support landing.

[ahabhgk]

@felixmosh Could you try 0.2.5-canary-7886e38-20230706011015, I believe it have been fixed by #3703

[ahabhgk]

We have completed the basic support for web worker in v0.2.6, enough to cover most common cases, you can checkout our document for more detail

But there are some uncommon cases we still not able to cover for now:

• call syntax for worker #3686: not support create worker by function call syntax navigator.serviceWorker.register()
• custom worker syntax #3656: not support customize worker syntax by module.parser.javascript.worker
• webpackEntryOptions magic comments #3680: not support webpackEntryOptions magic comments /* webpackEntryOptions: { filename: "workers/[name].js" } */

Since these issue are blocked by the implementation of compile time evaluation and parser hooks in Rspack, so I decide to close this one and tracking these in their own issue, if you have any problem when using worker with Rspack, feel free to open a new issue and ping me.