worker-plugin+SharedWorker搞定多标签共享线程

记得前段时间找工作的时候,被问到一道面试题:

页面之间的通讯有几种方式 当时就答出了几个自己用过的,比如localStorage,cookie,postMessage,url参数.没想到新的工作就碰到了新的方式,就是本文的要介绍的SharedWorker. SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。 简单来说SharedWorker是一种特定的worker,他是单例的,同域名只会创建一个,并且可以共享.

// a.js 
let myWorker = new SharedWorker('worker.js'); // page通过worker port发送消息 

myWorker.port.postMessage('11'); // page通过worker port接收消息 

myWorker.port.onmessage = (e) => console.log(e.data); 

// worker.js 
onconnect= function(e) { 
    const port = e.ports[0]; 
    port.postMessage('22'); 
    port.onmessage = (e) => { console.log(e.data);}
}

主线程和sharedowrker通过postMessage通信.

到这里,其实以上内容都是被重复了无数遍的,有无数的文章.但是以上只能称作介绍而已,我们是不能直接用在项目里的,因为我们的项目不可能在index.html里引入worker.js.我们希望能在spa应用里应用,需要结合webpack.

如果想把SharedWorker引入我们的工程,需要使用到worker-plugin,

const worker = new Worker('./foo.js', { type: 'module' });
                          ^^^^^^^^^^
                          gets bundled using webpack

这个插件的作用是告诉webpack,去编译worker.js,类似于import().这样worker.js可以加入我们的项目,依赖项目其他模块,不过要注意的是,这个插件在webpack里又开启了一个webpack实例,需要格外注意循环依赖的问题.