[フロントエンド] マルチスレッドワーカー

VUE3 リファレンス

npm ワーカーローダーをインストールする
 

構成パラメータをvue.config.js文件のdefineConfig

  chainWebpack: config => {
    config.module
      .rule('worker-loader')
      .test(/\.worker\.js$/)
      .use({
        loader: 'worker-loader',
        options: {
          inline: true
        }
      })
      .loader('worker-loader')
      .end()
  }

まず の下に新しいものを作成し、次に 内に新しいものを作成して、次のコードを追加しますjs ファイル コードでテストします:src目录workers文件夹worker.js

addEventListener('message', e => {
    const { data } = e
    console.log(data)
    setTimeout(() => {
        return postMessage('线程完成')
    }, 1000)
})
export default {}

テスト

<template>
  <div>
    <h1>vue3-Worker</h1>
    <button @click="openWorker">开启线程</button>
    <p>F12打开浏览器控制台查看效果</p>
  </div>
</template>

<script setup>
import Worker from 'worker-loader!@/workers/worker'
const openWorker = () => {
  const worker = new Worker()
  worker.postMessage('开启线程')
  worker.onmessage = e => {
    console.log(e.data)
    setTimeout(() => {
      worker.postMessage('线程关闭')
      worker.terminate()
    }, 1000)
  }
}
</script>