Best Practices for Module Federation

Module Federation is a powerful feature of Webpack 5 that allows multiple applications to share code and resources at runtime. In the context of Micro Frontends, it enables teams to build and deploy independent applications that can integrate seamlessly with one another.

1. Remote Module

A module that is loaded from a different build than the one you are running.

2. Shared Module

Modules that are shared between different builds to avoid duplication and reduce bundle size.

3. Dynamic Imports

Allows loading modules at runtime based on conditions, improving performance by only loading what is necessary.

1. Use Versioning: Ensure that shared modules have specified versions to prevent breaking changes.
2. Optimize Shared Dependencies: Limit the number of shared dependencies to reduce bundle size and improve load times.
3. Leverage Lazy Loading: Utilize dynamic imports to load modules only when necessary, enhancing performance.
4. Maintain a Centralized Configuration: Keep the Module Federation configuration centralized for easier management and updates.
5. Implement Fallbacks: Provide fallbacks for remote modules to handle cases where they fail to load.

Basic Module Federation Setup

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      filename: "remoteEntry.js",
      exposes: {
        './Component': './src/Component',
      },
      shared: {
        react: { singleton: true, eager: true, requiredVersion: '^17.0.2' },
        "react-dom": { singleton: true, eager: true, requiredVersion: '^17.0.2' },
      },
    }),
  ],
};