webworker是运行在浏览器后台的一个单独的线程，因此可以执行一些耗时的操作而不阻塞主线程，比如大量复杂的数据计算。
双进程可实时进行通信，主要使用onmessage和postmessage两个方法。
示例worker中的方法在计算中非常耗时，我们在worker里做测试。
// 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;
}
}
// 将计算的结果传递出去
postMessage(res);
};
vue2
vue2使用时需要安装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('计算结果:', e.data);
const end = performance.now();
console.log('计算耗时:', end - start);
};
}
注意： 如果没有vue.config.js的项目，引入worker文件时，直接把路径加在worker-loader后，
import Worker from 'worker-loader!../../workers/worker.js';
看一下结果
image.png
vue3+vite
vite编译时直接支持worker，因此只需要编译时保证正常编译即可
/// vite.config.js
worker: {
rollupOptions: {
output: {
assetFileNames: 'assets/[name].[ext]'
}
}
},
vue文件引用时直接引用即可，其他与v2无异
// index.vue
onMounted(()=>{
workerRef.value = new Worker(new URL('@/workers/worker.js', import.meta.url));
})
