在现代前端项目中使用 Worker

调研方案

• web-worker-proxy
  ：结合了 proxy/promise/webworker 的强大工具库，但如何在 ts 中使用却是个问题
• Orc.js
  ：一个简单的 worker 封装
• VueWorker
  ：结合 vue 的 worker 封装，无法理解，难道真的会有人在 vue 组件中进行大量计算么？
• comlink：Chrome 的一个基于 proxy/promise/webworker 的封装库
• worker-plugin
  ：和上面的同属 chrome 实验室的一个 webpack 插件

最后决定使用 comlink 结合 worker-plugin 实现简单的 worker 使用。

安装与配置

在 GitHub 上有 可运行示例 demo

相关问题： comlink-loader 工作不正常

添加相关依赖

yarn add comlink
yarn add -D worker-plugin

在 webpack 配置中添加插件

{
  plugins: [new WorkerPlugin()]
}

这里一般不需要特殊参数配置，如果需要，可以参考： worker-plugin

示例

基本示例

添加一个简单的 hello.worker.ts

import { expose } from 'comlink'

const obj = {
  counter: 0,
  inc() {
    this.counter++
  },
}

expose(obj)

在 main.ts
中使用

const obj = wrap(new Worker('./hello.worker.ts', { type: 'module' })) as any
alert(`Counter: ${await obj.counter}`)
await obj.inc()
alert(`Counter: ${await obj.counter}`)

但这里并不是类型安全的，所以我们可以实现正确的类型。

添加一个 hello.worker.ts
暴露出来的类型 HelloWorkerType

export interface HelloWorkerType {
  counter: number
  inc(): void
}

同时为了支持在 main.ts
中使用正确的类型，需要使用泛型

main.ts
修改如下

const obj = wrap(
  new Worker('./hello.worker.ts', { type: 'module' }),
)
alert(`Counter: ${await obj.counter}`)
await obj.inc()
alert(`Counter: ${await obj.counter}`)

纯函数

声明函数的类型 HelloCallback.worker.type.d.ts

type ListItem = T extends (infer U)[] ? U : never

export type MapWorkerType = (
  arr: List,
  cb: (val: ListItem) => U | Promise,
) => Promise

import { MapWorkerType } from './HelloCallback.worker.type'
import { expose } from 'comlink'

export const map: MapWorkerType = (arr, cb) => Promise.all(arr.map(cb))

expose(map)

const map = wrap(
  new Worker('./HelloCallback.worker.ts', {
    type: 'module',
  }),
)
const list = await map(
  [1, 2, 3],
  proxy((i) => i * 2),
)
console.log('list: ', list)

export class HelloClassWorker {
  sum(...args: number[]): number
}

import { HelloClassWorker } from './HelloClass.worker.type'
import { expose } from 'comlink'

class HelloClassWorkerImpl implements HelloClassWorker {
  sum(...args: number[]): number {
    return args.reduce((res, i) => res + i, 0)
  }
}

expose(HelloClassWorkerImpl)

const HelloClassWorkerClazz = wrap(
  new Worker('./HelloClass.worker.ts', {
    type: 'module',
  }),
)
const instance = await new HelloClassWorkerClazz()
console.log(await instance.sum(1, 2))