workerize-loader

A webpack loader that moves a module and its dependencies into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

Bundles a tiny, purpose-built RPC implementation into your app
If exported module methods are already async, signature is unchanged
Supports synchronous and asynchronous worker functions
Works beautifully with async/await
Imported value is instantiable, just a decorated Worker

Install

npm install -D workerize-loader

Usage

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: (our demo)

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

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

instance.expensive(1000).then( count => {
    console.log(`Ran ${count} loops`)
})

Options

`inline`

Type: Boolean Default: false

You can also inline the worker as a BLOB with the inline parameter

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

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

About Babel

If you're using Babel in your build, make sure you disabled commonJS transform. Otherwize, workerize-loader won't be able to retrieve the list of exported function from your worker script :

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

Credit

The inner workings here are heavily inspired by worker-loader. It's worth a read!

hackerwust/workerize-loader