gatsby-plugin-workerize-loader

A Gatsby plugin to integrate web workers into your GatsbyJS app via workerize-loader.

Install

Latest 2.0.0 version is compatible with Gatsby 3 and Webpack 5.

With Yarn:

1yarn add gatsby-plugin-workerize-loader -D

Or with npm:

1npm install --save-dev gatsby-plugin-workerize-loader

For Gatsby 2, please use version 1.5.0.

1yarn add gatsby-plugin-workerize-loader@1.5.0 -D

Or with npm:

1npm install --save-dev gatsby-plugin-workerize-loader@1.5.0

Usage

Add plugin to gatsby-config.js

1plugins: ['gatsby-plugin-workerize-loader']

Create a worker file with suffix .worker.js e.g. search.worker.js.

1// search.worker.js
2export async function search(searchInput) {
3  // expensive search procedure...
4
5  return searchResults
6}

Import and instantiate the web worker in your source file. One caveat is web worker only works in browser environment.

1// searchWorker.js
2import SearchWorker from 'path/to/search.worker.js'
3
4const searchWorker = typeof window === 'object' && new SearchWorker()
5
6export default searchWorker

Use it in your component

1// SearchComponent.js
2import searchWorker from "path/to/seachWorker.js";
3
4function SearchComponent() {
5  useEffect(() => {
6    searchWorker.search(searchInput).then(
7      searchResults => // do something with search results
8    );
9  }, [searchInput]);
10}

Recipes

Lazy initialization

Worker code is only downloaded and parsed when you first instantiate Worker i.e. new Worker(). Automatic code-splitting 🔥🔥🔥.

With useRef within a component.

1// SearchComponent.js
2import SearchWorker from "path/to/search.worker.js";
3
4function SearchComponent() {
5  const searchWorkerRef = useRef(null);
6
7  function getSearchWorker() {
8    if (!searchWorkerRef.current) {
9      searchWorkerRef.current = new SearchWorker();
10    }
11    return searchWorkerRef.current;
12  }
13
14  useEffect(() => {
15    getSearchWorker().search(searchInput).then(
16      searchResults => // do something with search results
17    );
18  }, [searchInput]);
19}

Or anywhere in your app.

1// getSearchWorker.js
2import SearchWorker from 'path/to/search.worker.js'
3
4let searchWorker
5
6export default function getSearchWorker() {
7  if (!searchWorker) {
8    searchWorker = new SearchWorker()
9  }
10  return searchWorker
11}

1// anywhere.js
2import getSearchWorker from "path/to/getSearchWorker.js";
3
4function someOperation (searchInput) {
5  getSearchWorker().search(searchInput).then(
6    searchResults => // do something with search results
7  );
8
9  // remaining steps
10}

License

MIT