Микрофронтенды с 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 рабочих дней. Получите консультацию — свяжитесь с нами для бесплатного аудита архитектуры.