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

posted @   贝尔塔猫  阅读(1229)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 聊一聊 C#异步 任务延续的三种底层玩法
· 上位机能不能替代PLC呢?
· 2024年终总结:5000 Star,10w 下载量,这是我交出的开源答卷
· 一个适用于 .NET 的开源整洁架构项目模板
· .NET Core:架构、特性和优势详解
历史上的今天:
2018-05-17 canvas 压缩图片的大小
2018-05-17 温故而知新 js 点击空白处关闭气泡
2017-05-17 karma + phantom + mocha + sion + chai + nightwatch + selenium2(webdriver) 测试框架学习
点击右上角即可分享
微信分享提示