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

绝地灬酷狼 2023-03-01 09:59 6阅读 0赞

# 还没使用过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`

类型：默认值：`Boolean``false`

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

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

或

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

## ##

### 关于Babel ###

如果您在生成中使用[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][https_github.com_developit_workerize-loader]*

[Babel]: https://babeljs.io/
[worker-loader]: https://github.com/webpack-contrib/worker-loader
[Link 1]: https://oss.ninja/mit/developit
[Link 2]: https://jasonformat.com/
[https_github.com_developit_workerize-loader]: https://github.com/developit/workerize-loader