jdthorpe / module-federation-dynamic-webworker-modules

Module Federation with Dynamic Loading in Webworkers

Dynamic Loading of Federated Modules in Web workers

An example of using dynamic remote federated modules in web workers, inspired by this example. More specifically, the dynamic module loading utilities in packages/main/src/utils/ are adapted from these utilities

Overview

• packages/main is a web app with a web worker
• packages/remote a utility that posts a message
• packages/shared a utility with a counter. The counter is used in both the main and remote modules

API Notes.

There are two separate re-implementations of these utilities from the reference example, because these lines provide an api that cannot be exactly recapitulated in a web worker. Specifically:

• The code in packages/remote/src/utils/getOrLoadComponent.js is essentially just a transliteration or the original code from the reference implementation. Specifically, it has exactly the same API, but suffers from the fact that importScripts is synchronous which means the worker is not free to load another component in paralell.

• The code in packages/main/src/utils/getOrLoadComponent.js allows for (down)loading multiple packages in parallel, taking advantage of the fact that additional arguments to importscripts() are downloaded in parallel, much like the multiple <script> tags that would be created with multiple asynchronous calls to the original method. This requires a bit more work to keep track of the already-in-progress downloads (using a dictionary of promises instead of a document full of <script> tags). This is exposed in the loadComponents() function, illustrated in packages/main/src/worker.js.

usage

1. Run yarn to install dependencies.
2. Run yarn build to build the packages.
3. Run yarn serve to serve prebuilt dist (or yarn start to serve from source).
4. Visit the app at localhost:3001