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

还没使用过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 = 0
    while (Date.now() - start < time) count++
    return count
}

index.js： （我们的演示）

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

let instance = worker()  // `new` is optional

instance.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