0Pricing
Frontend Academy · Урок

Микрофронтенды: Module Federation

Используйте Webpack Module Federation или Vite Federation, чтобы разделить крупный фронтенд на независимо развёртываемые удалённые модули, подключаемые оболочкой приложения

«Микрофронтенды: Module Federation» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое микрофронтенды

Разделение крупного интерфейса на части, которые разрабатываются и развёртываются независимо, обычно по одной части на команду или предметную область. У каждой части могут быть собственные фреймворк, репозиторий, процесс развёртывания и даже технологический стек. Приложение-оболочка объединяет их во время выполнения.

Зачем нужны микрофронтенды

Организации с более чем десятью командами интерфейсной разработки сталкиваются с ограничениями: узким местом в виде единого репозитория, медленной сборкой и конфликтующими графиками выпусков. Микрофронтенды позволяют командам выпускать изменения независимо, но ценой большей архитектурной сложности.

Module Federation — основной приём

Webpack Module Federation (Webpack 5, а также Vite через плагин) позволяет приложению-оболочке во время выполнения импортировать код из независимо развёрнутых удалённых приложений. Удалённое приложение предоставляет определённые модули, а оболочка использует их.

Конфигурация удалённого приложения

Удалённое приложение предоставляет свои модули через конфигурацию webpack.

// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  output: { publicPath: 'https://product-team.example.com/' },
  plugins: [
    new ModuleFederationPlugin({
      name: 'productApp',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductPage': './src/ProductPage',
        './productClient': './src/api/client'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Конфигурация оболочки (хоста)

Оболочка объявляет, какие удалённые приложения она импортирует.

// shell app: webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        product: 'productApp@https://product-team.example.com/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Импорт удалённых модулей

Используйте динамический импорт — webpack разрешит его через среду выполнения федерации.

// shell src/App.tsx
import { lazy, Suspense } from 'react';

const ProductPage = lazy(() => import('product/ProductPage'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <ProductPage />
    </Suspense>
  );
}

Федерация Vite

Vite поддерживает Module Federation через плагин @originjs/vite-plugin-federation с похожим интерфейсом.

// vite.config.ts
import federation from '@originjs/vite-plugin-federation';

export default {
  plugins: [federation({
    name: 'shell',
    remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
    shared: ['react', 'react-dom']
  })]
};

Общие зависимости

Перечислите библиотеки вроде React в shared, чтобы они не включались в сборку дважды. Среда выполнения федерации выбирает наиболее новую совместимую версию.

Независимое развёртывание

Каждое удалённое приложение имеет собственные сборку и процесс развёртывания. Оболочка указывает URL — публикация новой версии удалённого приложения автоматически распространяется на всех потребителей.

Обмен данными между приложениями

Не используйте прямые импорты для совместного состояния — применяйте события (CustomEvent), небольшой общий шиной событий или postMessage. Сохраняйте чёткие границы, чтобы не нарушать независимость приложений.

Альтернативы: iframe и веб-компоненты

iframe: наиболее надёжная изоляция, но неудобная навигация и работа с CSS. Веб-компоненты: встроенная поддержка браузерами, отсутствие привязки к фреймворку, но ограниченное общее состояние. Module Federation сочетает изоляцию с удобством разработки.

Компромиссы

Преимущества: независимые развёртывания, свобода выбора технологий, автономность команд. Издержки: сложная настройка сборки, конфликты общих зависимостей, ошибки во время выполнения, которые трудно отлаживать, усложнение структуры сборки. Такой подход оправдан только для действительно крупных организаций.

Когда следует избегать

Проекты одной команды, MVP и сайты, где над фронтендом работают менее 100 сотрудников. Налог на сложность реален — большинству команд лучше использовать монорепозиторий.

Быстрая проверка

Что позволяет делать Webpack Module Federation в архитектуре с микрофронтендами?

Итоги: микрофронтенды

Разделяйте фронтенд по командам или предметным областям для независимых развёртываний. Module Federation (webpack 5 / Vite plugin) — оболочка импортирует модули из удалённых приложений во время выполнения. Удалённое приложение предоставляет модули; оболочка объявляет удалённые приложения; оба приложения используют общие зависимости, например react. Для связи между приложениями используйте события. Решение сложное — применяйте его только в действительно крупных организациях.

Часто задаваемые вопросы

Урок «Микрофронтенды: Module Federation» бесплатный?

Да — полный текст урока «Микрофронтенды: Module Federation» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Микрофронтенды: Module Federation»?

Используйте Webpack Module Federation или Vite Federation, чтобы разделить крупный фронтенд на независимо развёртываемые удалённые модули, подключаемые оболочкой приложения Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Микрофронтенды: Module Federation»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Атомарный дизайн: атомы, молекулы и организмы
  2. Настройка монорепозитория с Turborepo
  3. Микрофронтенды: Module Federation
  4. Структура каталогов по функциональным возможностям
← Назад к Frontend Academy