# Worker
> 使用 `Worker` 可以開啟、調度其他線程處理一些耗時任務。但是它只兼容現代瀏覽器，所以，使用時需要先看系統部署的環境是否支持 [Worker 兼容性查詢](https://caniuse.com/?search=Worker)
參考：[MDN-關于Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Worker)
## Worker url
根據文檔所述，`Worker` 創建時支持 `blob url`。所以在 `Vue2` 項目中可以這樣引入一個 `assets` 目錄下的 `worker.js` （不推薦用這種寫法）。
```javascript
// worker.js
export default function () {
self.addEventListener('message', function (e) {
console.log('worker 收到 message', e.data)
self.postMessage("hello")
}, false)
}
```
```vue
// test.vue
<script>
import workerScript from '@/assets/worker.js'
export default {
mounted() {
const blob = new Blob(`(${workerScript.toString()})()`, { type: 'text/javascript' })
const bloburl = URL.createObjectURL(blob)
const worker = new Worker(bloburl)
worker.postMessage({ type: 'test', data: 'hello' })
worker.onmessage = (eve) => {
console.log('收到 worker 發送的消息', eve.data)
}
}
}
</script>
```
## worker-loader
如果你使用的是 `Webpack` 項目，引入 `assets`目錄下的 `worker` 文件時，用 `loader` 處理會更符合需求。畢竟大多時候，我們都需要在 `worker` 中引入其他包，來處理一些復雜邏輯（例如：用 `spark-md5` 計算文件 `hash` ）
```js
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
open: true
},
chainWebpack: config => {
// 這是我的 /worker.js 文件，需要按需調整
config.module.rule('worker').test(/[\\/]worker\.js$/).use('worker-loader').loader('worker-loader').options({
inline: 'no-fallback'
})
}
})
```
```javascript
// worker.js 不再需要導出
self.addEventListener('message', function (e) {
console.log('worker 收到 message', e.data)
self.postMessage("hello")
}, false)
```
在組件中使用
```vue
// test.vue
<script>
import WorkerTest from '@/assets/worker?worker&url'
export default {
mounted() {
const worker = new WorkerTest()
worker.postMessage({ type: 'test', data: 'hello' })
worker.onmessage = (eve) => {
console.log('收到 worker 發送的消息', eve.data)
}
}
}
</script>
```
## 優化
```javascript
// utils.js
/**
* 源于數據庫連接池的概念，用于管理多 Worker 調度問題
*/
class WorkerPool {
constructor(maxWorkers = 2) {
this.workers = []
this.running = 0
this.maxWorkers = maxWorkers
}
/**
*
* @param {() => Worker} createWorkerFunc
* @returns { Promise<{ worker: Worker, release: () => void }> }
*/
addWorker(createWorkerFunc) {
return new Promise((resolve, reject) => {
this.workers.push({ resolve, reject, createWorkerFunc })
this.run()
})
}
run() {
while (this.running < this.maxWorkers && this.workers.length > 0) {
const { resolve, reject, createWorkerFunc } = this.workers.shift()
try {
const worker = createWorkerFunc()
const release = () => {
worker.terminate()
this.running--
this.run()
}
resolve({ worker, release })
this.running++
} catch (error) {
reject(error)
}
}
}
}
export const MAX_WORKERS = navigator.hardwareConcurrency || 2
export const workerPool = new WorkerPool(MAX_WORKERS)
```
在組件中使用 `workerPool`
```vue
// test.vue
<script>
import WorkerTest from '@/assets/worker?worker&url'
import { MAX_WORKERS, workerPool } from '@/utils'
export default {
mounted() {
const worker = new WorkerTest()
worker.postMessage({ type: 'test', data: 'hello' })
worker.onmessage = (eve) => {
console.log('收到 worker 發送的消息', eve.data)
}
for (let i = 0; i < MAX_WORKERS; i++) {
workerPool.addWorker(() => new Worker()).then(({ worker, release }) => {
worker.postMessage("hello")
worker.onmessage = e => {
// 在 worker 使用完后釋放資源
release()
}
})
}
}
}
</script>
```
