Until now, when implementing microfrontends, you had to dig a little into the bag of tricks. One reason is surely that current build tools and frameworks do not know this concept. Webpack 5, which is currently in BETA, will initiate a change of course here.

It allows an approach implemented by the webpack contributor Zack Jackson. It’s called Module Federation and allows referencing program parts not yet known at compile time. These can be self-compiled microfrontends. In addition, the individual program parts can share libraries with each other, so that the individual bundles do not contain any duplicates.

In this article, I will show how to use Module Federation using a simple example. The source code can be found here.

Example

The example used here consists of a shell, which is able to load individual, separately provided microfrontends if required:

The shell is represented here by the black navigation bar. The micro front end through the framed area shown below. Also, the microfrontend can also be started without a shell

This is necessary to enable separate development and testing. It can also be advantageous for weaker clients, such as mobile devices, to only have to load the required program part.

Concepts of Module Federation

In the past, the implementation of scenarios like the one shown here was difficult, especially since tools like Webpack assumethat the entire program code is available when compiling. Lazy loading is possible, but only from areas that were split off during compilation.

With microfrontend architectures, in particular, one would like to compile and provide the individual program parts separately. In addition, mutual referencing via the respective URL is necessary. Hence, constructs like this would be desirable:

import('http://other-microfrontend');

Since this is not possible for the reasons mentioned, one had to resort to approaches such as externals and manual script loading. Fortunately, this will change with the Federation module in Webpack 5.

The idea behind it is simple: A so-called host references a remote using a configured name. What this name refers to is not known at compile time:

This reference is only resolved at runtime by loading a so-called remote entry point. It is a minimal script that provides the actual external url for such a configured name.

#unkategorisiert #webpack