Module Federation in Webpack 5

Rate this content
Bookmark

Microfrontends as Monolith? Shared component library or styleguide? This technique allows to consume modules from separate builds, which can be developed and deployed independently. An introduction, and further ideas.

This talk has been presented at JSNation Live 2020, check out the latest edition of this JavaScript Conference.

FAQ

Module federation addresses challenges related to build performance, web performance, and the manual workload required to extract and manage shared libraries across different parts of an application. It provides a scalable solution that maintains good build and web performance while facilitating the management of shared dependencies.

Yes, module federation can handle different versions of shared libraries. It allows each part of an application to provide modules into a shared scope with version information. Containers or consuming parts can request modules from this shared scope, ensuring that the highest compatible version available is used, which helps in de-duplicating modules across the application landscape.

In module federation, containers can be deployed using either an 'Evergreen' or 'Managed' approach. The Evergreen approach automatically uses the latest version of a container at runtime, while the Managed approach involves locking the version of the container and actively testing the application with updated containers to ensure compatibility and stability before deployment.

Module federation supports asynchronous module loading by automatically hoisting asynchronous operations required for loading remote modules up to the next async boundary, such as an asynchronous import statement. This ensures that components like a login button, which may depend on remote modules, are loaded efficiently and without blocking the main thread.

Module federation enhances web performance by minimizing requests and only loading the code that is actually needed. It optimizes the way exposed and shared modules are handled, allowing for bundling dependencies and extracting shared parts, which reduces the number of requests and the amount of unnecessary code loaded.

Module federation in Webpack 5 allows different builds to act like a monolithic application landscape. It enables building each part of an application separately as a container, and these containers can then expose or share modules. Modules from one container can be consumed by another, facilitating independent development and deployment while still sharing common libraries or functionality.

Tobias Koppers
Tobias Koppers
32 min
18 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Module Federation in Webpack 5 allows developers to build and deploy applications in a way that different teams can develop and compile their parts independently. This is achieved by exposing and sharing modules, which can be asynchronously loaded to minimize requests and improve web performance. The plugin also addresses challenges with build performance and manual workload for managing shared libraries. By using the exposes property, each module gets a public and local name, facilitating the consumption of modules across different containers. Module Federation supports asynchronous module loading, ensuring efficient and non-blocking operations. Deployment strategies include the Evergreen approach, which uses the latest container version automatically, and the Managed approach, which involves testing updated containers for stability. The plugin aims to balance forward progress with backward compatibility and stability. There are technical challenges with integrating ECMAScript modules, but Webpack is working towards enabling this feature.

1. Introduction to Module Filleration in Webpack 5

Short description:

I'm going to talk about module filleration in Webpack five. The motivation is you have a large to mid scale application and you work with multiple teams on multiple application paths. Let's look at the existing options with Webpack. There's this option about just doing a single build and you can build all your applications in all these parts together.

So let's get started. I worked for the Webpack core team and I'm going to talk about module filleration in Webpack five. So my talk is about a module fillervation in Webpack five. And I want to tell you about the motivation for this feature, how it works and what, how to use it.

So the motivation is you have a large to mid scale application and you work with multiple teams on multiple application paths. So you have separated your application or applications into multiple parts like micro-font ends, but also logical parts. And these parts would be developed independently by different teams. And another requirement is that you have a multiple part sharing common libraries or sharing on other paths. Here's an example. And you could have been header component and site component as micro-font end on pages. Or you could also have a style guide components library, which is shared by all the applications. But also different things than font ends like data fetching logic, business logic, or as a logical components.

So let's look at the existing options with Webpack. You could just go with native ECMAScript modules. This is maybe you don't have any build process for linking the parts together. You could just consume natively all your modules in the applications, and it would use native browser import statements to link them together. But there are some challenges with this approach. You basically opt out of all optimizations Webpack would do for you like unused explorers, concatenation of modules, other optimizations. And there are also some challenges about web performance. Like you would have each module separately. So it's causing a high count of requests at one time. This has each request has an overhead and you get less effective compression with more requests and smaller files. Of course, larger files usually compress better than in smaller files. And you have all of this drawback about only being able to use ECMAScript modules and you can't use CommonJS modules. You can't use CSS modules, ESM or other a lot of processed things like other languages also in Webpack.

There's this option about just doing a single build and you can build all your applications in all these parts together. And this way every module of every other part or application is accessible during the build process. So you can just use them via port statements. But there's also a few changes with that approach. Each update requires a full build of all applications and all parts.

2. Challenges and Module Federation

Short description:

So it has a high build time and this means high deploy delay from update to deploy the new version of the application. But there's a plugin in Webpack which allows you to separate a part of your build process into a separate build, which can be built independently. An alternative to this is externals and built-in libraries. So, to summarize this, native ECMAScript modules are problematic because of problematic web performance. A single build process is problematic about build performance. And the DLL and externals approach would work, but they require a lot of manual work to extract shared libraries or so on. So, in the end, we need a scalable solution, or at least a trade-off which has good build performance, good web performance, but also a good solution for shared dependencies. That's why we enter Module Federation.

So it has a high build time and this means high deploy delay from update to deploy the new version of the application. And you also have this problem it's that you can't separately build each application. So your applications don't stay separate from each other because if you want to share common parts or common modules or common libraries at one time you have to build them together. So it's like a challenge you have to come up with.

But there's a plugin in Webpack which allows you to separate a part of your build process into a separate build, which can be built independently. In this scenario you would build each part as DLL with a so-called DLL plugin. And these DLLs can be consumed at one time by the other by the consumer consuming build. But you also have a compile time dependency of the DLL generated manifest at compile time. So that's also one challenge and you have to rebuild your application when a part has changed or consumers have to be rebuilt. And it's an additional deploy delay. It's not so high compared to the single build approach but it's still an additional deploy delay you don't want to have. And there's also a big challenge about sharing libraries or sharing common modules. And basically if multiple parts share a library you have to pull out or extract this shared library into a separate DLL and separate process manually and then consume the DLL generated by the separate process by all part sharing this library. So it's a lot of manual work involved to be able to share libraries between parts.

An alternative to this is externals and built-in libraries. So each part, in this scenario, each part would be built as library and then consumed by the consuming parts of applications as externals. This eliminates this compile-time dependency between parts and consuming parts and other modules could be just consumed from the library at runtime. But still, the challenge about sharing libraries stays true for this scenario. Each shared library has to be extracted into separate process, separate library, and then be external in each of these consuming parts or consuming applications.

So, to summarize this, native ECMAScript modules are problematic because of problematic web performance. A single build process is problematic about build performance. And the DLL and externals approach would work, but they require a lot of manual work to extract shared libraries or so on. So, in the end, we need a scalable solution, or at least a trade-off which has good build performance, good web performance, but also a good solution for shared dependencies. That's why we enter Module Federation. In Module Federation, you would build each part separately. And here we would build a so-called container, and each part would be published or deployed as container. And any application or other containers could consume modules from this container. In this relationship, the consumer is the host, and the container would be the remote. And if the host consumes exposed modules from the container, then they would be called remote modules. And so we got back again to the separate, each part is built separately, independently and deployed independently, so we have this good build performance.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.

Workshops on related topic

Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Micro Frontends with Module Federation and React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends with Module Federation and React
Workshop
Alex Lobera
Alex Lobera
Did you ever work in a monolithic Next.js app? I did and scaling a large React app so that many teams can work simultaneously is not easy. With micro frontends you can break up a frontend monolith into smaller pieces so that each team can build and deploy independently. In this workshop you'll learn how to build large React apps that scale using micro frontends.
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Day Berlin 2023React Day Berlin 2023
149 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components