Lazy load multiple vanilla custom-element micro-frontend (MFEs) applications within a shell/host application using the Module Federation concept.
Module Federation allows us to reference program parts not yet known at compile time. This project leverages the Module Federation concept, where these program parts are self-compiled micro-frontends. For this, Webpack 5 is used to build the different microfront-ends, each consisting of a standalone application implemented as custom-elements.
The different Micro-frontends overcome dependency duplication issues by sharing common libraries with each other.
Each micro-frontend can be build, deployed, and tested in isolation from each other.
root
|- /modules
| '- mf1
| '- mf2
| '- ... // Micro-Frontend Apps
|
'- webpack.shell.config.js
'- webpack.mf1.config.js
'- webpack.mf2.config.js
'- ... // micro-frontends webpack configs
The shell application loads the individual, separately built and provided microfrontends as needed.
Each application, including the shell, has its own webpack config file located at the project root level.
npm run build:shell
npm run build:{MICRO_FRONTEND_NAME}
>npm run build:mf1
npm run build:all
npm run serve:dist:shell
npm run serve:dist:{MICRO_FRONTEND_NAME}
>npm run serve:dist:mf1
npm run serve:all
npm run serve:dist:all