assets/workers

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Import script as web worker with ?worker suffix

Scripts can be imported as web workers with the `?worker` suffix, which creates a separate chunk in the production build. Example: `import Worker from './shader.js?worker'; const worker = new Worker()`.

Import script as shared worker with ?sharedworker suffix

Scripts can be imported as shared workers with the `?sharedworker` suffix. Example: `import SharedWorker from './shader.js?sharedworker'; const sharedWorker = new SharedWorker()`.

Inline worker as base64 with ?worker&inline

Workers can be inlined as base64 strings using the `?worker&inline` suffix, for example: `import InlineWorker from './shader.js?worker&inline'`.

Web Worker import with ?worker

Use the `?worker` query to load Web Workers. Example: `import Worker from './worker.js?worker'`. The worker script can use ESM `import` statements instead of `importScripts()`. During development this relies on browser native support, but for the production build it is compiled away.

Web Worker inline with ?worker&inline

Web Workers can be inlined as base64 strings at build time using `?worker&inline`. Example: `import InlineWorker from './worker.js?worker&inline'`. By default, the worker script will be emitted as a separate chunk in production build.

Web Worker URL with ?worker&url

To retrieve the worker as a URL, use `?worker&url`. Example: `import MyWorker from './worker?worker&url'`.

Web Worker import with new Worker()

A web worker script can be imported using `new Worker()` and `new SharedWorker()`. This syntax leans closer to the standards and is the recommended way to create workers. Example: `const worker = new Worker(new URL('./worker.js', import.meta.url))`.

Web Worker with module type

The worker constructor accepts options, which can be used to create "module" workers. Example: `const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' })`.

Worker detection requirements

Worker detection only works if the `new URL()` constructor is used directly inside the `new Worker()` declaration. Otherwise it is handled as a static asset URL instead. Additionally, all options parameters must be static values (i.e. string literals).

Web workers use new Worker syntax

Web workers in Vite are encouraged to be written with the new Worker syntax to follow modern standards.

Give your agent this brain