Introduction#

💡 What is Module Federation?#

Module Federation is an architectural pattern for the decentralization of JavaScript applications (similar to microservices on the server-side). It allows you to share code and resources among multiple JavaScript applications (or micro-frontends). This can help you:

• Reduce code duplication
• Improve code maintainability
• Lower the overall size of your applications
• Enhance the performance of your applications

✨ What is Module Federation 2.0?#

Module Federation 2.0 differs from the Module Federation built into Webpack5 by providing not only the core features of module export, loading, and dependency sharing but also additional dynamic type hinting, Manifest, Federation Runtime, and Runtime Plugin System. These features make Module Federation more suitable for use as a micro-frontend architecture in large-scale Web applications.

🔥 Features#

Module Federation has the following features:

• ⚡ Code sharing、Dependency reuse

• 📝 Manifest

• 🎨 Module Federation Runtime

• 🧩 Runtime Plugins System

• 🚀 Dynamic type prompt

• 🛠️ Chrome Devtool

• 🦀 Rspack and Webpack Support

🎯 Use Cases#

Module Federation is suitable for the following scenarios:

• Large Applications: For large applications, you can break the application into multiple micro-frontends and use Module Federation to share code and resources between them.
• Microfrontend Architecture: Module Federation is an ideal tool for building microfrontend architectures.
• Multi-team Development: Module Federation can assist multiple teams in collaboratively developing large applications.

🕠 History of Module Federation#

Module Federation is a new feature introduced in Webpack 5, but its history dates back to 2017. At that time, the Webpack team began exploring a way to share code between multiple applications.

• In 2018, Webpack 4.20 was released, introducing module hooks, which laid the foundation for the development of Module Federation.

• In 2019, Webpack 5 was released, officially introducing the Module Federation feature.

Module Federation has become a powerful tool for building modern web applications.

🕰️ The Future of Module Federation#

Module Federation aims to become an architectural method for building large web applications, similar to microservices in the backend. Module Federation will provide more capabilities to meet the foundational needs of large web application decentralization, currently including these parts:

• Providing comprehensive Devtool tools
• Offering more high-level framework capabilities like Router, Sandbox, SSR
• Providing best practices for large web applications based on Module Federation

✨ Next Steps#

You might want to: