vue项目中web worker的使用

主要分为2个文件，一个worker文件，一个主文件（调用worker的）.

worker文件，需要以worker.js为后缀名，你可以直接使用worker.js或者xx.worker.js都是可以的。

self.onmessage = (e) => {
  console.log("worker 接受到的message e--", e.data);
  for (let index = 0; index < 9999999999; index++) {
    if (index === 9999999999 - 1) {
      self.postMessage("计算结束了");
    }
  }
};

主文件，调用的地方可以是vue文件或者js文件都是可以的。这个看每个人的需求。我们这里以vue文件为例

import XX from "./xx.worker";//这个路径根据自己真实情况配置
...
created() {
    let xx = new XX();
    xx.postMessage({ start: "开始计算" });
    xx.onmessage = (msg) => {
      console.log("msg--", msg);
    };
}

相互之间通信主要就是依赖于postMessage和onmessage。核心代码就是这样，很简单。

再说下vue下vue.config.js的配置，前提需要npm install worker-loader -D

chainWebpack: (config) => {
    config.module
      .rule("worker")
      .test(/\.worker\.js$/)
      .use("worker-loader")
      .loader("worker-loader")
      .options({
        inline: "fallback"
      });
    config.module.rule("js").exclude.add(/\.worker\.js$/);
  },