vue中使用webworker

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));
})