Suggestion: include how to use esm web worker with dynamic imports on documentation

[userquin]

Since the definition of importing an esm web worker is a hack, we can use it as a constructor:

import MyWorker from './my-worker?worker`

function useWebWorker() {
  return new MyWorker()
}

We can find the code previous import generates in the worker plugin:

src/node/plugins/worker.ts

async transform(_, id) {
  ...
  return `export default function WorkerWrapper() {
    return new Worker(${JSON.stringify(url)}, { type: 'module' })
  }`
}

It is confusing to people how to use it with dynamic imports, and seems that cannot be used with import('...').

Invoking the dynamic import returns a module, and so, it is necessary to invoke what the worker plugin exports: it exports the function as default so we need to use it, the following code is equivalent (with code spliting):

async function useWebWorker() {
  const MyWorkerModule = await import('./my-worker?worker')
  return MyWorkerModule.default() <=== use `default` function
}

I think this should be included in Vite docs, here: web worker section.

[userquin]

The following statement is not true (in bold), only if not using dynamic import, and hence the confusion:

Web Worker

A web worker script can be directly imported by appending ?worker to the import request. The default export will be a custom worker constructor