还没使用过Web Worker? 推荐一款开源工具Workerize-Loader，让你在webpack项目中轻松使用Web Worker

Workerize-Loader

将模块及其依赖项移动到 Web 辅助角色的 Web 包加载程序，自动将导出的函数反映为异步代理。

将一个小型、专门构建的 RPC 实现捆绑到应用中
如果导出的模块方法已异步，则签名保持不变
支持同步和异步工作函数
与异步/等待效果优美
导入的值是可实例化的，只是一个装饰Worker

安装

npm install -D workerize-loader

使用

worker.js：

// block for `time` ms, then return the number of loops we could run in that time:
export function expensive(time) {let start = Date.now(),count = 0while (Date.now() - start < time) count++return count
}

index.js： （我们的演示）

import worker from 'workerize-loader!./worker'let instance = worker()  // `new` is optionalinstance.expensive(1000).then( count => {console.log(`Ran ${count} loops`)
})

选项

inline

类型：默认值：Booleanfalse

您还可以将工作人员内联为 BLOB 与参数inline

// webpack.config.js
{loader: 'workerize-loader',options: { inline: true }
}

或

import worker from 'workerize-loader?inline!./worker'

关于Babel

如果您在生成中使用Babel，请确保禁用了公共JS转换。否则，辅助加载程序将无法从辅助角色脚本检索导出函数的列表：

{test: /\.js$/,loader: "babel-loader",options: {presets: [["env",{modules: false,},],]}
}

IE11 需要多填充

Workerize 加载程序支持支持 Web Worker 的浏览器 - 即 IE10+。但是，这些浏览器需要多填充才能使用"承诺"，而"工人加载器"所依赖的承诺。建议在全球范围内安装多填充，因为 Webpack 本身也需要承诺加载捆绑包。

最小的实现是我们建议安装的实现：

npm i promise-polyfill

然后，在模块中，您正在"工作"，只需将其添加为您的第一次导入：

import 'promise-polyfill/src/polyfill';

所有工作代码现在都可以使用承诺。

测试

若要测试不使用 Webpack 时通常导入的模块，请直接在测试中导入该模块：workerize-loader

-const worker = require('workerize-loader!./worker.js');
+const worker = () => require('./worker.js');const instance = worker();

若要在不使用 Webpack 时测试依赖于工作导入的模块，您需要对测试运行程序进行一些深入探讨。对于 Jest，可以定义一个自定义，该自定义在主线程上模拟辅助加载器：transform

// in your Jest configuration
{"transform": {"workerize-loader(\\?.*)?!(.*)": "<rootDir>/workerize-jest.js"}
}

...然后将填充程序添加到您的项目中：workerize-jest.js

module.exports = {process(src, filename, config, options) {return 'module.exports = () => require(' + JSON.stringify(filename.replace(/.+!/,'')) + ')';},
};

现在，您的测试及其导入的任何模块都可以使用前缀。workerize-loader!

启发

这里的内部工作深受worker-loader启发。值得一读！

许可证

麻省理工学院执照©·米勒

翻译来源：https://github.com/developit/workerize-loader