web worker 使用及在 electron 中使用web worker

Posted 2023-04-04

参考技术A javascript 属于单线程环境,无论你运行多少脚本生成多少事件 亦或者使用setTimeout(),setInterval(),Promise()这类异步函数都在一个线程中去运行的.
但在html5的新规范中为我们引入了线程技术Web Worker在实现多线程的基础上并建立的线程消息来实现并行传递.

在html中引入

简单的使用Web Worker后,可以改良下将它设置为同步

GitHub项目地址

首先需要安装 worker-loader yarn add worker-loader -D & npm install worker-loader -D
再在webpack.config.js中装载loader

具体worker-loader配置可以参考 webpack
再Electron的入门中设置 nodeIntegrationInWorker : true

在浏览器中会显示引入了一个 compute.worker.js 的文件

2022-03-02 关于electron-vue中引入web worker的几种方法尝试

参考技术A 1.采用原生的引入方式 直接引入web worker ,总是报路径错误
const isDev = process.env.NODE_ENV === 'development'
console.log(process)
console.log(666)

GET file:///C:/Users/fugang/Desktop/Warehouse%20management%20system/wareHouse-manager/node_modules/electron/dist/resources/electron.asar/renderer/worker.js net::ERR_FILE_NOT_FOUND
2.采用worker loader的方式引入web worker
注意：这里有个坑 测试环境按照网上的跑起来没有问题
但是打包之后始终报错误 Uncaught TypeError: Cannot read properties of undefined (reading 'webpackJsonp')
//针对于这个错误搜索出来的解决方法 只有针对vue-cli2的webpack.prod.conf.js，没有针对vue-cli3的vue.config.js解决方法
3.没有办法只能通过 inline-worker引入试试
npm install inline-worker 地址 https://github.com/mohayonao/inline-worker
原理是把对应的脚本文件转换成二进制 BLOB
上面2种方法搞了半天硬是没有找到答案