vite 使用 web worker

• 不能和 vite.config 的 server.origin 配置一起使用。
• 可以使用第三方插件。
• 可以使用 fetch 请求和处理数据。 

 

////////////////// App.vue
<button @click="go">发送消息</button>

// vite 第一种用法：new URL + import.meta.url
var myWorker = new Worker(new URL('./worker.ts', import.meta.url))

// vite 第二种用法：加入 ?worker 后缀标识
import MyWorker  from './worker.ts?worker'
const myWorker = new MyWorker()

// 父接受子的消息
myWorker.onmessage = function (e) {
    console.log('Message received from worker', e)
}

// 父发送消息给子
function go() {
    myWorker.postMessage('hello')
}

////////////////// worker.ts

// 子接受父的消息
onmessage = function (e) {
    console.log('Message received from main script')
    const workerResult = 'Result: ' + e.data[0] * e.data[1]
    console.log('Posting message back to main script')
    // 子发送消息给父
    postMessage(workerResult)
}

 

参考资料：

Vite项目中使用Web Worker - 掘金

three.js使用web worker解析模型并添加到主线程 - 掘金

pages/three/workerLoad.tsx · 刘宏斌/three-template-next.js - Gitee.com