{"id":12267,"date":"2021-02-23T15:23:24","date_gmt":"2021-02-23T14:23:24","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=12267"},"modified":"2023-06-18T18:07:18","modified_gmt":"2023-06-18T16:07:18","slug":"__trashed","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/02\/23\/__trashed\/","title":{"rendered":"Micro Frontends: Benefits of Webpack 5 Module Federation – A comparison"},"content":{"rendered":"\n

In this article I am going to have a look at the benefits of module federation in micro frontends with Webpack 5. We will be creating two similar micro frontend websites using two different approaches and compare the amount of resources that will be transferred over the network. <\/p>\n\n\n\n

Short overview of micro frontend approach:<\/h4>\n\n\n\n

The micro frontend concept aims to separate modern websites (main page) into smaller components that are individually hosted as webpages (component page) themselves. A component is dependent on the context and could a whole feature, for instance a shopping cart, or just an element that will be used on the main page like a button.<\/p>\n\n\n\n

This approach is similar to micro services approach and the usage strongly dependent on context and development capabilities, while an ideal implementation offers several benefits as it offers the possibility to use various technologies within a single website or have independent teams working on autonomous parts of a complex site. Of course there are also downsides to this approach, one of them being possibly duplicated resources and large overheads when it comes to integrating component pages. Module Federation promises the tackle the issue of duplicated dependencies for projects that are built with Webpack 5. <\/p>\n\n\n\n

To elaborate I am going to build a site using custom html elements approach and then use module federation approach to create the same exact site and compare them.<\/p>\n\n\n\n

The code I will be referring to is located at: <\/p>\n\n\n\n

Module Federation Approach: https:\/\/gitlab.mi.hdm-stuttgart.de\/du009\/modulefederationfrontends<\/a><\/p>\n\n\n\n

HTML 5 Custom Elements Approach: https:\/\/gitlab.mi.hdm-stuttgart.de\/du009\/microends.git<\/a><\/p>\n\n\n\n

Since my primary focus is to inspect the resource size between those two approaches and introduce the concepts in general, I might not go into great detail about the implementation. Instead I will try to explain the crucial steps briefly.<\/p>\n\n\n\n

Example page we want to create: <\/h4>\n\n\n\n
\"\"<\/a>
Example micro frontend webstore<\/figcaption><\/figure><\/div>\n\n\n\n

As you can see, we have 2 different websites included into 1 containing website:<\/p>\n\n\n\n

Container (main page) – Host <\/p>\n\n\n\n

ProductDetails (component page) – Component <\/p>\n\n\n\n

ExploreProducts (component page) – Component <\/p>\n\n\n\n

Approach without module federation: A react micro frontend using HTML Custom Elements to share components between host and consumer applications.<\/h3>\n\n\n\n

HTML Custom Elements approach is one way to implement micro frontends. The Component (component page) we want to share with our host application (main page) is going to be rendered through a custom defined HTML tag. <\/p>\n\n\n\n

Our first step is to create the ProductDetails<\/span> component itself, which is going to be simple React component. <\/p>\n\n\n\n

\"\"<\/a>
productDetail.js<\/figcaption><\/figure>\n\n\n\n

In the next step, we need to create a shell that provides the HTML Element. We create a custom javascript class that extends from HTML Element and therefore inherits certain methods. One of those methods that we need to overwrite is connectedCallback()<\/code>. This method is called once the custom tag occurs in our main application and should include the initialisation logic of our component. In a more complex case, our component could fetch data or even include further components. In this example we are simply going to return our previously created React component. <\/p>\n\n\n\n

\"\"<\/a>
App.js of ProductDetail<\/figcaption><\/figure>\n\n\n\n

An important thing to note: in this approach, stylesheets are not automatically shared between the component and our main page. We have to dynamically insert a html style element into the DOM that contains the styling we want on our component (line 7 includes the css as string, line 53 inserts css into our created style tag). <\/p>\n\n\n\n

To have an idea of what our component looks like, we are going to serve it locally. Webpack bundles our component (or application) and provides a development server. Bundling and server configurations are specified in our webpack configuration webpack.config.json<\/code><\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

After running npm start<\/code> our component is served at http:\/\/localhost:300<\/code>2 and looks like this:<\/p>\n\n\n\n

\"\"<\/a>
ProductDetail at localhost:3002<\/figcaption><\/figure>\n\n\n\n

We now repeat the same procedure for our second component ExploreProducts<\/span>, which looks like this. <\/p>\n\n\n\n

\"\"<\/a>
ExploreProducts at localhost:3001<\/figcaption><\/figure>\n\n\n\n

Once we set up our components, we have to build our host application \/ container (main page)<\/span> and enable it to consume the components we just built. Its going to be a simple React page that includes some logic to fetch our components (loadMicrofrontendAsComponent()<\/code>) and then inserts the custom HTML (e.g. <product-detail><\/product-detail><\/code>) tags where we want them to be (line 34 and line 37). <\/p>\n\n\n\n

\"\"<\/a>
App.js from container application<\/figcaption><\/figure>\n\n\n\n

Once we have all components running locally and start our host application the result will look like this:<\/p>\n\n\n\n

\"\"<\/a>
Micro frontend at localhost:3000<\/figcaption><\/figure>\n\n\n\n

Upon inspection of the network tab, we can identify our two components being loaded over the network with a respective size of about 1.6 MB. This is quite large, as it includes two completely bundled applications. All dependencies of our components, like React<\/code> or React-DOM<\/code> are included in this file. This leads to a problem with micro frontends using this approach: We use the same version of React in both our components, yet we still include the library twice in our host application, producing an unnecessary overhead.<\/p>\n\n\n\n

\"\"<\/a>
Network inspection of host application at localhost:3000<\/figcaption><\/figure>\n\n\n\n

Module Federation approach with Webpack 5: A react micro frontend using Webpack 5 bundling to share components between applications<\/h3>\n\n\n\n

In contrast to our first example, we are now going to create the same exact website using Webpack 5 Module Federation. <\/p>\n\n\n\n

We will be starting off creating the two components we want to use in our host application (main page)<\/span>: ExploreProducts<\/span> and ProductDetail<\/span>.<\/p>\n\n\n\n

They are the same simple React components and look as follows: <\/p>\n\n\n\n

\"\"<\/a>
productDetail.js from module federation approach<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
exploreProducts.js from module federation approach<\/figcaption><\/figure>\n\n\n\n

which produce this result when served locally via Webpack:<\/p>\n\n\n\n

\"\"<\/a>
ProductDetail Component at localhost:3003<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
ExploreProducts Component at localhost:3002<\/figcaption><\/figure>\n\n\n\n

In order to enable our components to be consumed by a host application, we have to include the Module Federation Plugin into our Webpack 5 configuration and specify the name of our component (line 40) as well as tell the plugin where it can find the component we want to provide (line 44). <\/p>\n\n\n\n

\"\"<\/a>
webpack.config.json for product detail component<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
webpack.config.json for explore products component<\/figcaption><\/figure>\n\n\n\n

Now we have to build our host application and specify the remote components we want to import in its webpack configuration. <\/p>\n\n\n\n

\"\"<\/a>
App.js of container application<\/figcaption><\/figure>\n\n\n\n
\"\"<\/a>
webpack.config.json from app container<\/figcaption><\/figure>\n\n\n\n

Once we served all our components and the host application via npm start <\/code>we can now see our micro frontend running at localhost:3001<\/code>.<\/p>\n\n\n\n

\"\"<\/a>
micro frontend at localhost:3001<\/figcaption><\/figure>\n\n\n\n

If we open the network inspector we can identify the requests that load our remotely hosted components. The remote entry files for each component (remoteEntry.js<\/code>) as well as the components themselves (src_exploreProducts_js.js <\/code>and src_productDetail_js.js<\/code>) are requested over the network. Additionally some requests to handle sharing and versioning of the dependencies specified as shared in the webpack configs of the remotes. If we compare the sizes of the response data to the size of response data used in the custom elements approach, we can immediately see that even tough there are more requests in module federation, the total size is much smaller. This will most likely result in generally faster loading times for micro frontends built with this approach.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Conclusion<\/h3>\n\n\n\n

Webpack 5 Module Federation is a really useful, yet still somewhat complex approach to implement micro frontends. It offers huge potential when creating distributed applications and managing custom components or dependencies that are supposed to be shared across different parts of the application. <\/p>\n\n\n\n

In general there are many ways to implement micro frontends and share components between applications and part of the development process should be to specify the needs and dependencies that are going to occur in the project and choose implementations based on the results. <\/p>\n\n\n\n

In this article I showcased a really narrow and not complex example of two different approaches when it comes to implementing a micro frontend structure. Further resources and details about techniques used in this example can be found at: <\/p>\n\n\n\n

https:\/\/module-federation.github.io\/<\/a><\/p>\n\n\n\n

https:\/\/github.com\/module-federation\/module-federation-examples<\/a><\/p>\n\n\n\n

https:\/\/medium.com\/@gilfink\/wrapping-react-components-inside-custom-elements-97431d1155bd”>https:\/\/medium.com\/@gilfink\/wrapping-react-components-inside-custom-elements-97431d1155bd<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

In this article I am going to have a look at the benefits of module federation in micro frontends with Webpack 5. We will be creating two similar micro frontend websites using two different approaches and compare the amount of resources that will be transferred over the network. Short overview of micro frontend approach: The […]<\/p>\n","protected":false},"author":944,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,649,662],"tags":[409,406,405,407,408],"ppma_author":[798],"class_list":["post-12267","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-interactive-media","category-web-performance","tag-custom-elements","tag-frontend","tag-microfrontend","tag-module-federation","tag-webpack-5"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":3822,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2018\/08\/05\/3822\/","url_meta":{"origin":12267,"position":0},"title":"Web Performance Optimization for Continuous Deployment – Move fast and don’t lose performance","author":"Benjamin Kowatsch","date":"5. August 2018","format":false,"excerpt":"The performance of websites today is a decisive factor in how many users visit them and thus how much money can be earned from them. The impact of this fact is further enhanced by the widespread use of mobile devices and the speed of the mobile Internet. To counteract the\u2026","rel":"","context":"In "Allgemein"","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2859,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2017\/08\/31\/iot-with-the-raspberry-pi-final-application-part-3\/","url_meta":{"origin":12267,"position":1},"title":"IoT with the Raspberry Pi \u2013 Final application \u2013 Part 3","author":"mr143@hdm-stuttgart.de","date":"31. August 2017","format":false,"excerpt":"In our final application, we have put together a solution consisting of four different modules. First, we have again the Raspberry Pi which raises and sends the sensor data using the already presented Python script. We changed the transfer protocol in the final application to MQTT, which gives us more\u2026","rel":"","context":"In "Allgemein"","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/08\/mqtt-1024x465.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/08\/mqtt-1024x465.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2017\/08\/mqtt-1024x465.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":12751,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/02\/28\/industry-4-0-real-time-data-visualization\/","url_meta":{"origin":12267,"position":2},"title":"Industry 4.0 – Real time data visualization","author":"Philip Betzler","date":"28. February 2021","format":false,"excerpt":"As part of the lecture \"System Engineering and Management\", we worked on a project in cooperation with IBM to visualize Industry 4.0 data in real time using a configuration-based approach. This project aims to avoid needing a web developer every time there is a modification in the data.","rel":"","context":"In "Allgemein"","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/03\/config_type_harting_mica.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/03\/config_type_harting_mica.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/03\/config_type_harting_mica.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":21653,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/09\/17\/studidash-a-serverless-web-application\/","url_meta":{"origin":12267,"position":3},"title":"“Studidash” | A serverless web application","author":"dk119","date":"17. September 2021","format":false,"excerpt":"by Oliver Klein (ok061), Daniel Koch (dk119), Luis B\u00fchler (lb159), Micha Huhn (mh334) Abstract You are probably familiar with the HdM SB-Funktionen. After nearly four semesters we were tired of the boring design and decided to give it a more modern look with a bit more functionality then it currently\u2026","rel":"","context":"In "Allgemein"","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/grafik-1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/grafik-1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/09\/grafik-1.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":12695,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2021\/02\/28\/automate-performance-optimization\/","url_meta":{"origin":12267,"position":4},"title":"Automate Performance Optimization","author":"Amelie Kassner","date":"28. February 2021","format":false,"excerpt":"In order to display a website as quickly as possible, performance optimization is necessary. Since manual optimization can be time-consuming and often several steps need to be performed, automating performance optimization can be a good idea. This in turn can include, for example, reporting (speed analysis of the website) and\u2026","rel":"","context":"In "Interactive Media"","block_context":{"text":"Interactive Media","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/interactive-media\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/PSI_CommandLine-2-150x150.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/PSI_CommandLine-2-150x150.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/PSI_CommandLine-2-150x150.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2021\/02\/PSI_CommandLine-2-150x150.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":28492,"url":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2026\/02\/20\/auswirkung-der-integration-von-ki-auf-den-software-development-lifecycle-mit-fokus-auf-frontend-entwicklung\/","url_meta":{"origin":12267,"position":5},"title":"Auswirkung der Integration von KI auf den Software Development Lifecycle mit Fokus auf Frontend-Entwicklung","author":"Tom Bestvater","date":"20. February 2026","format":false,"excerpt":"Abstract - Die Integration K\u00fcnstlicher Intelligenz (KI) in den Software Development Lifecycle (SDLC) f\u00fchrt zu einer Transformation der Frontend-Entwicklung und verschiebt den Fokus von der manuellen Implementierung hin zur KI-gest\u00fctzten Orchestrierung. Das vorliegende Paper untersucht den Einfluss generativer KI-Modelle und multimodaler Sprachmodelle (MLLMs) auf die Frontend-Engineering-Prozesse, wobei ein besonderer Schwerpunkt\u2026","rel":"","context":"In "Allgemein"","block_context":{"text":"Allgemein","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/category\/allgemein\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2026\/02\/sdlc_phases.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2026\/02\/sdlc_phases.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2026\/02\/sdlc_phases.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.mi.hdm-stuttgart.de\/wp-content\/uploads\/2026\/02\/sdlc_phases.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"authors":[{"term_id":798,"user_id":944,"is_guest":0,"slug":"du009","display_name":"Dominik Utler","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/d3bfebe5f9440c09509649c12c603cc4472248c0d67035d04b4c02b5b97ae9ac?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/12267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/users\/944"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/comments?post=12267"}],"version-history":[{"count":13,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/12267\/revisions"}],"predecessor-version":[{"id":12448,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/posts\/12267\/revisions\/12448"}],"wp:attachment":[{"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/media?parent=12267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/categories?post=12267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/tags?post=12267"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/wp-json\/wp\/v2\/ppma_author?post=12267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}