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