vue3系 + compositionApi + webpack5系 + typescriptの組み合わせでWebWorkerを使う。

概要

タイトルな環境でマルチスレッドを実装した時のメモです。

ディレクトリ構成

├── src
│   ├── libs
│   │   └── worker.ts
│   ├── App.vue

worker呼び出し側

<template>
  <div>web worker test</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const worker = new Worker(new URL('@/libs/worker.ts', import.meta.url));
    worker.postMessage('data');
    worker.onmessage = (event: MessageEvent<int>) => {
      console.log('[worker_thread_result]:' + event.data);
    };

    let num = 0;
    const st = new Date().getTime();
    for (let i = 0; i < 100000000; i++) {
      num = num + i;
    }
    console.log('[main_thread_result]' + num);

    return {};
  },
});
</script>

worker側

const w: Worker = self as any;

w.onmessage = (event: MessageEvent<str>) => {
  let num = 0;
  for (let i = 0; i < 100000000; i++) {
    num = num + i;
  }
  self.postMessage(num);
};

export default w;

マルチスレッドの確認

Main以外のスレッドが立ち上がっていたらOK