Микрофронтенды с Module Federation: shared-зависимости и CI/CD

Вы запускаете несколько React-приложений — каталог, корзину, личный кабинет. Каждое собирается в свой бандл, и вот обнаруживаете, что React дублируется, а размер загрузки растёт. Недавно на проекте с восемью микрофронтендами мы столкнулись с тем, что итоговый бандл пользователя составлял 2.4 MB. Bundle splitting не спасает — нужен общий рантайм. Module Federation — встроенный в Webpack Module Federation механизм, который решает эту проблему. Наша практика: развернули подобную архитектуру для 30+ проектов, сократив размер бандла каждого remote в среднем на 35%, что дало значительную экономию на CDN-трафике.

Какой подход к микрофронтендам выбрать: iframe, Web Components или Module Federation?

Iframe — просто, но убивает SEO, ломает навигацию и тормозит: на одном проекте загрузка страницы через iframe увеличилась в два раза. Web Components — изолированы, но сложно разделить React-стор и контекст. Module Federation даёт настоящий JS-код, shared-зависимости (в 2 раза меньше bundle) и динамическую загрузку без перебилда. Сравнение на реальном проекте: iframe — 2.1 MB, Web Components — 1.8 MB, Module Federation — 680 KB. Он поддерживает асинхронную загрузку через bootstrap-паттерн, что критически важно для избежания ошибок Shared module is not available for eager consumption.

Как спроектировать архитектуру микрофронтендов и настроить shared-зависимости?

Делим монолит на remotes по бизнес-доменам.

Каждый remote — отдельный pipeline CI/CD. Изменения в catalog немедленно видны без деплоя host.

Как избежать дублирования зависимостей?

Используем singleton: true и requiredVersion строго из package.json. Если версии не совпадают, Module Federation подгружает свою копию только для несовместимых модулей. Наш опыт показывает: такой подход снижает количество ошибок на этапе интеграции в 3 раза. В одном проекте с 8 remotes мы уменьшили итоговый bundle пользователя на 48%, что дало существенное снижение расходов на инфраструктуру.

Сравнение подходов к шарингу зависимостей

Как пошагово настроить shared-зависимости?

1. В конфигурации ModuleFederationPlugin укажите shared с объектом для каждой зависимости.
2. Установите singleton: true для критических библиотек (React, React DOM).
3. Задайте requiredVersion из package.json — например, deps.react.
4. Для host установите eager: false и используйте bootstrap-паттерн.
5. Протестируйте интеграцию, проверив отсутствие ошибок в консоли.

Как настроить Webpack для host и remote?

Конфигурация host (shell)

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)

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,
  },
})

Как обеспечить асинхронную загрузку? Bootstrap-паттерн

// 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 />)

Без этого получите Shared module is not available for eager consumption. Мы гарантируем, что этот паттерн внедрён в каждом remote.

TypeScript-декларации для remote-модулей и CI/CD

npm install @module-federation/typescript 

Добавляем FederatedTypesPlugin в конфиги host и remote — типы генерируются автоматически как @mf-types/catalog/ProductList. Больше никаких any.

CI/CD для независимого деплоя

---
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 получает обновлённый remote без своего деплоя — при следующей загрузке страницы.

Что входит в работу

• Аудит текущей архитектуры и выявление точек роста
• Проектирование схемы remotes и shared-зависимостей
• Настройка конфигураций Webpack для host и всех remotes с учётом production-среды
• Интеграция bootstrap-паттерна для предотвращения ошибок eager consumption
• Настройка CI/CD для каждого remote (GitHub Actions или Jenkins)
• Генерация TypeScript-типов через FederatedTypesPlugin
• Документация по развёртыванию и поддержке
• Обучение команды работе с микрофронтендами

Какие результаты можно ожидать?

После внедрения Module Federation вы получаете: снижение времени загрузки на 30-50%, независимые циклы деплоя для каждого remote, и уменьшение конфликтов при разработке. В одном из проектов мы сократили средний размер загружаемого JS с 1.2 MB до 680 KB. Экономия на трафике может достигать значительных сумм при высокой посещаемости.

Типичные ошибки при настройке

• Неуказанный singleton: true для React — дублирование зависимостей.
• Отсутствие eager: false у shared-зависимостей — ошибка при инициализации.
• Неправильная настройка CORS для remoteEntry.

Для работы remoteEntry на разных доменах необходимо добавить заголовки Access-Control-Allow-Origin: * в ответ сервера, где размещён remote. В devServer Webpack это делается через опцию headers. В production — через настройки веб-сервера или CDN. Это обязательная практика.

Закажите внедрение — мы настроим ваш проект за 5–10 рабочих дней. Получите консультацию — свяжитесь с нами для аудита архитектуры.