Module Federation application

Module Federation Applications

Module Federation is a modern front-end architectural pattern that allows independently built applications to dynamically share code at runtime. It breaks the limitations of traditional micro-frontend solutions by leveraging native support from Webpack 5, enabling fine-grained module-level sharing across applications and significantly improving the performance and development experience of large-scale applications.

Core Principles and Working Mechanism

The essence of Module Federation lies in the "container" concept, where each participating application can act as a "host" consuming modules from other applications or as a "remote" exposing its own modules. This bidirectional communication mechanism is implemented through Webpack's runtime interface:

// webpack.config.js (Remote application configuration)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
        './Store': './src/store'
      }
    })
  ]
}

// webpack.config.js (Host application configuration)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://cdn.example.com/remoteEntry.js'
      }
    })
  ]
}

The runtime loading process consists of three phases:

1. The host application loads the remote entry file (remoteEntry.js)
2. Establishes a shared scope
3. Loads the actual module code on demand

Performance Optimization Practices

Shared Dependency Management

Avoid duplicate bundling through the shared configuration, significantly reducing bundle size:

new ModuleFederationPlugin({
  shared: {
    react: {
      singleton: true,
      requiredVersion: '^18.2.0'
    },
    'react-dom': {
      singleton: true,
      requiredVersion: '^18.2.0'
    }
  }
})

Key optimization points:

• singleton: true enforces singleton mode
• eager: true preloads shared modules
• Version control strategies ensure compatibility

Dynamic Loading Strategies

Implement on-demand loading with React.lazy:

const RemoteButton = React.lazy(() => import('app1/Button'));

function App() {
  return (
    <Suspense fallback={<Loader />}>
      <RemoteButton />
    </Suspense>
  );
}

Performance optimization techniques:

1. Preload remote entry files
2. Use webpackPrefetch comments
3. Implement fallback solutions for loading failures

State Management Sharing

Typical implementation for sharing Redux stores across applications:

// Exposing side
exposes: {
  './store': './src/store'
}

// Consuming side
const remoteStore = await import('app1/store');
const store = createStore(reducer, remoteStore.initialState);

Advanced Application Scenarios

Micro-Frontend Architecture Integration

Configuration example integrating with single-spa:

// Sub-application exports lifecycle
exposes: {
  './bootstrap': './src/bootstrap'
}

// Main application registration
singleSpa.registerApplication({
  name: 'app1',
  app: () => import('app1/bootstrap'),
  activeWhen: '/app1'
});

Server-Side Rendering Optimization

Special handling in Next.js:

// next.config.js
const remotes = isServer => ({
  app1: `app1@${isServer ? 
    'http://localhost:3001' : 
    '/app1'}/_next/static/chunks/remoteEntry.js`
});

Hot Version Update Solution

Implementing refreshless updates:

// Listen for version changes
const update = new CustomEvent('federationUpdate');
window.dispatchEvent(update);

// Application layer listening
window.addEventListener('federationUpdate', () => {
  import('app1/Button').then(module => {
    // Component update logic
  });
});

Performance Monitoring and Tuning

Key Metrics Collection

Monitoring via Performance API:

const loadRemote = async (remoteName) => {
  const start = performance.now();
  try {
    await import(remoteName);
    const duration = performance.now() - start;
    metrics.track('remote_load', { remoteName, duration });
  } catch (error) {
    metrics.track('remote_error', { remoteName });
  }
};

Webpack Configuration Optimization

Production environment specialization:

output: {
  uniqueName: 'myApp',
  publicPath: 'auto',
  chunkFilename: '[name].[contenthash].js'
},
optimization: {
  chunkIds: 'deterministic',
  moduleIds: 'deterministic'
}

Cache Strategy Design

Content hash-based long-term caching:

new ModuleFederationPlugin({
  filename: '[name]-[contenthash].js',
  runtimeChunk: { name: 'runtime' }
});

Typical Problem Solutions

Style Isolation Issues

CSS Modules solution:

// webpack configuration
{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]'
        }
      }
    }
  ]
}

Circular Dependency Handling

Shared module version conflict resolution:

shared: {
  lodash: {
    requiredVersion: '^4.17.0',
    strictVersion: true,
    version: '4.17.21'
  }
}

Network Error Recovery

Implementing retry mechanism:

const loadWithRetry = async (remote, retries = 3) => {
  try {
    return await import(remote);
  } catch (err) {
    if (retries > 0) {
      await new Promise(r => setTimeout(r, 1000));
      return loadWithRetry(remote, retries - 1);
    }
    throw err;
  }
};

Engineering Practices

Automated Testing Strategy

Jest mock for remote modules:

// jest.config.js
moduleNameMapper: {
  '^app1/(.*)$': '<rootDir>/__mocks__/app1/$1'
}

// __mocks__/app1/Button.js
export default () => <button>Mock Button</button>;

CI/CD Integration

Build pipeline optimization example:

# .github/workflows/build.yml
steps:
  - name: Build Host
    run: webpack --config webpack.host.js
    env:
      REMOTE_URL: ${{ steps.deploy.outputs.remote-url }}
  
  - name: Build Remote
    run: webpack --config webpack.remote.js

Type System Support

Type declaration file generation:

// package.json
{
  "scripts": {
    "types": "tsc --emitDeclarationOnly && merge-dirs ./dist-types"
  }
}