Micro Frontends with Module Federation: Practical Guide

Micro Frontends divide a monolithic application into smaller parts, each developed, tested and deployed independently. Webpack 5's Module Federation provides the necessary infrastructure for different builds to share modules at runtime, allowing teams to work in a decoupled way.

Why adopt Micro Frontends?

Organizational scalability, teams can deliver features autonomously.
Independent deployment, updates to a module do not require rebuilding the entire application.
Reuse of components, shared libraries are only loaded once.
Performance, loading on demand (lazy loading) reduces the initial bundle size.

Module Federation key concepts

Concept	Description
Host	Application that consumes remote modules.
Remote	Application that exposes modules via `exposes`.
Shared	Dependencies (React, lodash) that are loaded once.
Dynamic Remotes	Loading remotes at runtime via `import()`.

Basic configuration (Webpack), 5 lines

// host/webpack.config.js
module.exports = {
  plugins: [new ModuleFederationPlugin({
    name: 'host',
    remotes: { remote: 'remote@https://example.com/remoteEntry.js' },
    shared: { react: { singleton: true }, "react-dom": { singleton: true } }
  })]
};

// remote/webpack.config.js
module.exports = {
  plugins: [new ModuleFederationPlugin({
    name: 'remote',
    filename: 'remoteEntry.js',
    exposes: { './Button': './src/Button' },
    shared: { react: { singleton: true }, "react-dom": { singleton: true } }
  })]
};

Each application has its own webpack.config.js; the host imports the remote module as remote/Button.

Remote module consumption (React), 3 lines

import React, { Suspense } from 'react';
const RemoteButton = React.lazy(() => import('remote/Button'));
export default () => <Suspense fallback="Carregando…"><RemoteButton /></Suspense>;

React.lazy guarantees lazy loading of the remote component, reducing the initial bundle.

Dependency versioning strategies

Singleton, ensures that only one copy of React is loaded.
Strict Version, use requiredVersion to avoid incompatibilities.
Fallback, configure fallback: 'path/to/local/react' if the remote fails.

Deploy and CI/CD

Separate build, each micro-frontend has its own pipeline (npm run build).
Publishing, upload the assets (remoteEntry.js, bundles) to a CDN.
Cache busting, include hash in the file name (remoteEntry.[contenthash].js).
Feature flags, enable/disable remotes via configuration on the host.

Good performance practices

Chunk splitting, use splitChunks to extract shared libs.
Prefetch/Preload, <link rel="prefetch" href="remoteEntry.js"> to improve loading time.
Tree shaking, ensure only used modules are included.
Monitoring, track bundle size with webpack-bundle-analyzer.

Security

CORS, configure Access-Control-Allow-Origin headers on remote assets.
Integrity, use Subresource Integrity (integrity attribute) when loading remoteEntry.js.
Sandbox, limit the scope of remotes via CSP (script-src, object-src).

Quick checklist

Configure ModuleFederationPlugin on the host and remotes.
Set shared for critical dependencies (React, lodash).
Implement lazy loading with React.lazy or import().
Publish remoteEntry.js on CDN with hash.
Configure CI/CD for independent build and deployment.
Test offline remote fallback.
Monitor bundle size and performance.
Apply CSP and SRI for security.

Conclusion

Module Federation brings modularity and organizational scale to the world of front-ends, allowing teams to deliver functionality independently while maintaining a cohesive and performant user experience. By following good configuration, dependency versioning and CI/CD practices, your team can evolve quickly without compromising quality.

Have you already implemented micro frontends? Share your experiences in the comments!