Module federation

Module Federation is a JavaScript technology based on webpack that handles dependency resolution and the loading/importing of modules, even if they come from external, remote bundles.

A bundle is a set of JavaScript modules which provides some functionality and can be run on its own. A typical web project often includes multiple bundles to provide all the necessary JavaScript functionality. In Plone, Module Federation helps us to prevent loading the same dependencies multiple times.

Think of a Plone add-on with a JavaScript bundle which uses Leaflet, Select2 and jQuery. Those dependencies are also used by the Plone core JavaScript bundle "Mockup" and other add-ons. These dependencies can - and should - be shared among the different bundles.

This talk explains the concepts behind Module Federation and how we use it in Plone to optimize loading speed.

Module Federation is a feature that landen in webpack 5. It helps for loading javascript only once, and in smaller chunks, as needed. Recently it was extracted as separate library.

Think of two bundles that both load a version of Patternslib. With Module Federation, we load the highest compatible version, which is specified in package.json.

Module Federation was invented by Zack Jackson in 2018. He wanted multiple small applications to work together without loading code multiple times.

For Plone 6, the whole Mockup stack was rewritten, this was ongoing. But how would we do add-ons? If they just needed jQuery, it should be alright, but how about add-ons that need more. I then found out about Module Federation. Manfred Steyer helped me, he lives close to me and he already spoke about Angular at the Plone conference in Barcelona. At the BuschenschankSprint we managed to merge this approach and release Mockup 8. Zack Jackson added an issue in Patternslib with some more possible improvements. It is nice that these people at the core of Module Federation are involved in Patternslib.

To use this in a new add-on, use bobtemplates.plone 6.0b14/15 or higher, or use a template.

Question: Could this help Volto too?
Answer: Yes, that should help. For Classic Plone, the main bundle went from 1.5 MB minified to 300 kB normal. Plus the chunks then, but those are only loaded when needed.