vue中使用webWorker worker-loader配置

1.下载依赖包

npm i [email protected] --save

2.vue中使用worker-loader不使用window自带的worker对象主要就是为了解决路径问题所以为了路径的正确解析需要对其做解析配置。添加 chainWebpack的一段路径解析（关于chainWebpack为webpack的配置同extendWebpack相同），添加了解析配置后，worker-loader就可以解析后缀为 worker.js的js文件为worker对象了。

vue.config.js中配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
       chainWebpack(config) {
         config.module
           .rule('worker')
           .test(/\.worker\.js$/)
          .use('worker-loader')
           .loader('worker-loader')
           .end();
        config.module.rule('js').exclude.add(/\.worker\.js$/)
       },
})

在其他打包工具或框架中，使用webpack打包可以找到脚手架配置文件中的
chainWebpack或extendWebpack

quasar cli中 quasar.config.js的build对象中

    build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'

      // transpile: false,
      // publicPath: '/',

      // Add dependencies for transpiling with Babel (Array of string/regex)
      // (from node_modules, which are by default not transpiled).
      // Applies only if "transpile" is set to true.
      // transpileDependencies: [],

      // rtl: true, // https://quasar.dev/options/rtl-support
      // preloadChunks: true,
      // showProgress: false,
      // gzip: true,
      // analyze: true,

      // Options below are automatically set depending on the env, set them if you want to override
      // extractCSS: false,

      // https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain

      // chainWebpack(config) {
      //   config.module
      //     .rule('worker')
      //     .test(/\.worker\.js$/)
      //     .use('worker-loader')
      //     .loader('worker-loader')
      //     .end();
      //   config.module.rule('js').exclude.add(/\.worker\.js$/)
      // },
      chainWebpack:chain=>{
        chain.module
          .rule('worker')
          .test(/\.worker\.js$/)
          .use('worker-loader')
          .loader('worker-loader')
          .end();
          chain.module.rule('js').exclude.add(/\.worker\.js$/)
      },
    },

3.在src文件夹下创建一个存放所有worker文件的文件夹workers，创建一个子线程js文件 test.worker.js

代码如下

//监听主线程传递的消息
self.addEventListener("message", (e) => {
console.log("子线程both：",e.data)
//逻辑代码

//返回给主线程逻辑后消息
self.postMessage('子线程返回消息')
});

4.在主线程中引入创建的子线程文件

import testWorker from '../workers/test.worker.js'

创建线程

  initTest(){
    const worker = new testWorker()
 //向子线程发送消息postMessage
  worker.postMessage('开启线程')
//接收子线程传递过来的消息
worker.onmessage = e => {
    console.log('主线程both：',e.data)
    setTimeout(() => {
      worker.postMessage('线程关闭both')
      //terminate销毁线程
      worker.terminate()
    }, 1000)
  }
  },

vue中使用webWorker worker-loader配置

猜你喜欢