vite-worker使用

vite是现在流行的前端打包工具，有时候需要使用worker，虽然官方有写，但实际可能还有同学不是很会用，所以自己实践了一下记录了一波使用方法；

vite版本

"vite": "^4.0.0",

默认导入worker为报404

// 1.通过构造器导入 .ts也是支持的
const worker = new Worker(new URL('./worker.js', import.meta.url))
// 2.带查询后缀的导入 .ts也是支持的
import MyWorker from './worker.js?worker';
const worker = new MyWorker();

MyWorker文件代码

const ctx: Worker = self as any;
// ctx.addEventListener('message', (res) => {
//     console.log('接收到了消息', res);
// }, false);
ctx.onmessage = (res) => {
    if (res.data.type === 'ready') {
        console.log('收到父线程消息');
        ctx.postMessage('子线程准备完毕');
    }
};
// ctx.addEventListener('error', (err) => {
//     console.log('收集错误', err);
// });
ctx.onerror = (err) => {
    console.log('收集错误', err);
};
export default ctx;

使用MyWorker

import myWorker from './worker.ts?worker';
var homeWorker = new myWorker();
homeWorker.postMessage({type: 'ready'});
homeWorker.onmessage = (res) => {
    console.log('home收到消息', res.data);
};
homeWorker.onerror = (err) => {
    console.log('home收集到错误', err);
    // 关闭
    homeWorker.terminate();
}

使用后控制台打印

// 收到父线程消息
// home收到消息 子线程准备完毕