Воркер в Vite

Воркер собирается отдельным файлом и запускается со страницы.

Тяжёлую или долгую работу удобно вынести в отдельный поток. Скрипт воркера лежит рядом с модулями и слушает сообщения:

self.onmessage = (event) => {
  self.postMessage(event.data);
};

В разметке нужен элемент для результата:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>hello</title>
  </head>
  <body>
    <p id="out">wait</p>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

На странице импортируем конструктор с суффиксом ?worker, создадим экземпляр и покажем ответ в абзаце:

import HelloWorker from './workers/hello.worker.js?worker';

const worker = new HelloWorker();
const out = document.querySelector('#out');

worker.onmessage = (event) => {
  out.textContent = event.data;
};

worker.postMessage('hello');

На сервере разработки Vite отдаёт воркер отдельным модулем. Откроем http://localhost:5173 и увидим слово hello после ответа потока. После сборки файл воркера лежит в папке результата отдельно от главного скрипта.

Создайте src/jobs/ready.worker.js, который возвращает строку ready на любое сообщение, и выведите ответ на странице через импорт с суффиксом ?worker.

Измените воркер так, чтобы он добавлял к полученному тексту восклицательный знак, и проверьте результат на экране, отправив слово ready из главного модуля.