Как добавить Web Workers в Angular

Что такое Web Workers

Как известно JavaScript работает в одном потоке (single thread), что может привести к задержкам в работе всего приложения, если в нем есть тяжелые, требующие большого количества процессорного времени, вычислительные операции.

Web Workers API – это инструмент, который позволяет создавать дополнительный поток для скриптов и выполнять их в фоновом режиме, что позволяет приложению стабильно работать при тяжелых вычислениях.

Web Workers в Angular

Web Workers API не является частью Angular, тем не менее worker-ы можно создавать, добавить и использовать в любом месте приложения. В Angular CLI даже есть специальная команда для генерации воркера.

ng generate web-worker app

Эта команда сделает несколько вещей. Она сгенерирует web worker в корне приложения src/app/app.worker.ts следующего содержания:

addEventListener('message', ({ data }) => {
  const response = `Воркер отвечает на ${data}`;
  postMessage(response);
});

Если команда была выполнена в первый раз, то также добавиться конфигурационный файл tsconfig.worker.json примерно такого содержания:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ],
    "types": []
  },
  "include": [
    "src/**/*.worker.ts"
  ]
}

И обновится файл angular.json.

Последнее, что сделает эта команда, добавит следующий код в файл src/app/app.component.ts

if (typeof Worker !== 'undefined') {
  // Создается новый веб воркер
  const worker = new Worker(new URL('./app.worker', import.meta.url));
  worker.onmessage = ({ data }) => {
    console.log(`Получено сообщение: ${data}`);
  };
  worker.postMessage('hello');
} else {
  // Web worker-ы не поддерживаются в данном окружении.
}

Таким образом команда ng generate web-worker app выполняет всю подготовительную работу, остается добавить только код, отвечающий за вычисления, которые хочется проводить в фоновом режиме.