Gatsby: WebWorker support

[universse]

Hi. Is it possible to use web workers with Gatsbyjs? I can't seem to find any resource related to this. If I wanted to use something like https://github.com/developit/workerize-loader, I would need to create custom webpack config?

[freiksenet]

Hi! What do you want to do with workers? We use workers in gatsby-plugin-offline, for example.

[universse]

Hi. There are a few use cases I have in mind. I have a big list of items and I want to display it as a feed. The users can manipulate the list through sorting and filtering. I was testing on throttled cpu on chrome and the UI just froze. So I was thinking maybe could offload that to another thread via web worker instead. I understand that we could query presorted and prefiltered data but that means transferring a lot of data to the client, so I didn't go for that option.

Another use case is regarding firebase. Basically, firebase size is huge (https://github.com/firebase/firebase-js-sdk/issues/332) and it affects the initial page load. I guess the parsing and processing of firebase bundles can be offloaded to web workers instead to improve performance.

I have been exploring https://github.com/developit/workerize and https://github.com/GoogleChromeLabs/comlink. I'm just not sure if there is anything to take note of regarding configuration since both projects come with their own webpack loader. And my knowledge with webpack and babel configs in general is quite limited.

[wardpeet]

Sure you can! By default we do not support it but we use webpack under the hood which means all available plugins are available.

https://www.gatsbyjs.org/docs/add-custom-webpack-config/#add-custom-webpack-config

you can add your specific workerize code using https://www.gatsbyjs.org/docs/browser-apis/. If you need any help, just let us know!

[universse]

Ok got it. Thanks a lot!

[wdevon99]

@universse Did you find a solution to your problem, i am trying to do the exact thing!

[universse]

@wdevon99 Yes. I ended up using https://github.com/developit/workerize-loader

gatsby-node.js

exports.onCreateWebpackConfig = ({ actions: { replaceWebpackConfig }, getConfig }) => {
  const config = getConfig()

  config.module.rules.push({
    test: /\.worker\.js$/,
    use: { loader: 'workerize-loader' }
  })

  config.output.globalObject = 'this'

  replaceWebpackConfig(config)
}

Then suffix your worker file with .worker e.g search.worker.js. One caveat is you need to check for browser environment when instantiate worker e.g.

search.worker.js

export async function search () {
  ...
}

foo.js

import SearchWorker from 'path/to/search.worker.js

const searchWorker = typeof window === 'object' && new SearchWorker()

This is because worker isn't available server-side.
Hope it helps!