You run multiple React apps — catalog, cart, personal account. Each builds its own bundle, and you discover React is duplicated, increasing load size. Recently on a project with eight microfrontends, we faced a final user bundle of 2.4 MB. Bundle splitting doesn't help — you need a shared runtime. Module Federation — a mechanism built into Webpack Module Federation — solves this. Our practice: we deployed such architecture for 30+ projects, reducing each remote's bundle size by an average of 35%, resulting in significant CDN traffic savings.
Which microfrontend approach to choose: iframe, Web Components, or Module Federation?
Iframe is simple but kills SEO, breaks navigation, and slows down: on one project, page load via iframe doubled. Web Components are isolated but make it hard to share React state and context. Module Federation provides real JS code, shared dependencies (2x smaller bundle), and dynamic loading without rebuild. Comparison on a real project: iframe — 2.1 MB, Web Components — 1.8 MB, Module Federation — 680 KB. It supports async loading via the bootstrap pattern, critical to avoid Shared module is not available for eager consumption errors.
How to design microfrontend architecture and configure shared dependencies?
We split the monolith into remotes by business domain.
| Remote | Function | Repository |
|---|---|---|
| host (shell) | Navigation, layout, routing | apps/shell |
| catalog | Product list and details | apps/catalog |
| checkout | Cart and checkout | apps/checkout |
| auth | Login, registration, widget | apps/auth |
Each remote has its own CI/CD pipeline. Changes in catalog are immediately visible without redeploying host.
How to avoid dependency duplication?
Use singleton: true and requiredVersion strictly from package.json. If versions mismatch, Module Federation loads its own copy only for incompatible modules. Our experience shows this approach reduces integration errors by 3 times. In one project with 8 remotes, we reduced the final user bundle by 48%, substantially lowering infrastructure costs.
Comparison of dependency sharing approaches
| Approach | Bundle size | Complexity | Version flexibility |
|---|---|---|---|
| Iframe | 2.1 MB | Low | Full isolation |
| Web Components | 1.8 MB | High | Limited |
| Module Federation | 680 KB | Medium | Automatic |
How to configure shared dependencies step by step?
- In ModuleFederationPlugin config, specify
sharedwith an object for each dependency. - Set
singleton: truefor critical libraries (React, React DOM). - Set
requiredVersionfrompackage.json— e.g.,deps.react. - For host, set
eager: falseand use the bootstrap pattern. - Test integration, ensuring no console errors.
How to configure Webpack for host and remote?
Host (shell) configuration
const { ModuleFederationPlugin } = require('webpack').container
const HtmlWebpackPlugin = require('html-webpack-plugin')
const deps = require('./package.json').dependencies
module.exports = (env, argv) => ({
mode: argv.mode ?? 'development',
entry: './src/index.ts',
output: {
publicPath: 'auto',
filename: '[name].[contenthash].js',
clean: true,
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react', '@babel/preset-typescript'],
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
catalog: `catalog@${
argv.mode === 'production'
? 'https://catalog.example.com'
: 'http://localhost:3001'
}/remoteEntry.js`,
checkout: `checkout@${
argv.mode === 'production'
? 'https://checkout.example.com'
: 'http://localhost:3002'
}/remoteEntry.js`,
auth: `auth@${
argv.mode === 'production'
? 'https://auth.example.com'
: 'http://localhost:3003'
}/remoteEntry.js`,
},
shared: {
react: {
singleton: true,
requiredVersion: deps.react,
eager: false,
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
eager: false,
},
'react-router-dom': {
singleton: true,
requiredVersion: deps['react-router-dom'],
},
},
}),
new HtmlWebpackPlugin({ template: './public/index.html' }),
],
devServer: {
port: 3000,
historyApiFallback: true,
},
})
Remote (catalog) configuration
const { ModuleFederationPlugin } = require('webpack').container
const deps = require('./package.json').dependencies
module.exports = (env, argv) => ({
mode: argv.mode ?? 'development',
entry: './src/index.ts',
output: {
publicPath: 'auto',
filename: '[name].[contenthash].js',
clean: true,
},
plugins: [
new ModuleFederationPlugin({
name: 'catalog',
filename: 'remoteEntry.js',
exposes: {
'./ProductList': './src/components/ProductList',
'./ProductDetail': './src/components/ProductDetail',
'./useCart': './src/hooks/useCart',
},
shared: {
react: {
singleton: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
},
'react-router-dom': {
singleton: true,
},
},
}),
],
devServer: {
port: 3001,
headers: { 'Access-Control-Allow-Origin': '*' },
historyApiFallback: true,
},
})
How to ensure async loading? Bootstrap pattern
// src/index.ts
import('./bootstrap')
// src/bootstrap.tsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
const root = createRoot(document.getElementById('root')!)
root.render(<App />)
Without this, you get Shared module is not available for eager consumption. We guarantee this pattern is implemented in every remote.
TypeScript declarations for remote modules and CI/CD
npm install @module-federation/typescript
Add FederatedTypesPlugin to host and remote configs — types are generated automatically as @mf-types/catalog/ProductList. No more any.
CI/CD for independent deployment
name: Deploy Catalog
on:
push:
branches: [main]
paths: ['apps/catalog/**']
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: cd apps/catalog && npm ci && npm run build
- name: Deploy to CDN
run: aws s3 sync apps/catalog/dist s3://catalog.example.com --delete
- name: Invalidate CloudFront
run: aws cloudfront create-invalidation --distribution-id $CF_ID --paths "/*"
Host gets the updated remote without its own deployment — on the next page load.
What's included in the work
- Audit of the current architecture and identification of growth points
- Design of remotes schema and shared dependencies
- Webpack configuration for host and all remotes with production environment in mind
- Bootstrap pattern integration to prevent eager consumption errors
- CI/CD setup for each remote (GitHub Actions or Jenkins)
- TypeScript type generation via FederatedTypesPlugin
- Documentation for deployment and support
- Team training on microfrontends
What results can you expect?
After implementing Module Federation, you get: 30-50% reduction in load time, independent deployment cycles for each remote, and fewer development conflicts. In one project, we cut the average JS size from 1.2 MB to 680 KB. Traffic cost savings can be substantial with high traffic.
Common configuration mistakes
- Missing
singleton: truefor React — dependency duplication. - Missing
eager: falseon shared dependencies — initialization error. - Incorrect CORS configuration for remoteEntry.
For remoteEntry to work across different domains, add Access-Control-Allow-Origin: * headers on the server hosting the remote. In Webpack devServer, this is done via the headers option. In production, via web server or CDN settings. This is mandatory.
Order implementation — we'll set up your project in 5–10 working days. Get a consultation — contact us for a free architecture audit.