webworker是運(yùn)行在瀏覽器后臺(tái)的一個(gè)單獨(dú)的線程，因此可以執(zhí)行一些耗時(shí)的操作而不阻塞主線程僵刮，比如大量復(fù)雜的數(shù)據(jù)計(jì)算据忘。
雙進(jìn)程可實(shí)時(shí)進(jìn)行通信，主要使用onmessage和postmessage兩個(gè)方法搞糕。
示例worker中的方法在計(jì)算中非常耗時(shí)勇吊，我們?cè)趙orker里做測(cè)試。
// worker.js
onmessage = function (e) {
// onmessage獲取傳入的值
let res = e.data || 0;
for (let i = 0; i < 50000; i++) {
for (let i = 0; i < 100000; i++) {
res += i;
}
}
// 將計(jì)算的結(jié)果傳遞出去
postMessage(res);
};
vue2
vue2使用時(shí)需要安裝worker-loader窍仰，npm i worker-loader汉规，修改配置vue.config.js
chainWebpack: config => {
// set worker-loader
config.module
.rule('worker')
.test(/.worker.js$/)
.use('worker-loader')
.loader('worker-loader')
.end();
},
vue文件引用worker
// index.vue
import Worker from '@/workers/worker.js';
mounted() {
this.workerRef = new Worker();
const start = performance.now();
this.workerRef.postMessage(0);
this.workerRef.onmessage = e => {
console.log('計(jì)算結(jié)果:', e.data);
const end = performance.now();
console.log('計(jì)算耗時(shí):', end - start);
};
}
注意： 如果沒(méi)有vue.config.js的項(xiàng)目，引入worker文件時(shí)，直接把路徑加在worker-loader后针史，
import Worker from 'worker-loader!../../workers/worker.js';
看一下結(jié)果
image.png
vue3+vite
vite編譯時(shí)直接支持worker晶伦，因此只需要編譯時(shí)保證正常編譯即可
/// vite.config.js
worker: {
rollupOptions: {
output: {
assetFileNames: 'assets/[name].[ext]'
}
}
},
vue文件引用時(shí)直接引用即可，其他與v2無(wú)異
// index.vue
onMounted(()=>{
workerRef.value = new Worker(new URL('@/workers/worker.js', import.meta.url));
})
