Основы федерации модулей

Федерация модулей позволяет приложению JavaScript во время выполнения загружать и выполнять код другого независимо развёрнутого приложения. Этот подход появился в Webpack 5, а теперь возможен и с помощью встроенных карт импорта и динамического импорта.

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

В Webpack 5 хост объявляет remotes (другие приложения для использования), а удалённые приложения объявляют exposes (то, что они предоставляют). Среда выполнения при запуске получает небольшой манифест от каждого удалённого приложения и загружает фрагменты по мере их импорта хостом.

Без Webpack та же идея работает с картами импорта, указывающими на удалённые пакеты ESM, и динамическим импортом для загрузки. В карте импорта хоста указано "feature-cart": "https://cart-team.example.com/entry.js"; import("feature-cart") загружает последнюю развёрнутую версию.

Без координации каждое удалённое приложение поставляло бы собственную копию React. Инструменты федерации позволяют объявлять общие зависимости: первое удалённое приложение, загрузившее React, делает его доступным для всех остальных. Встроенные подходы используют карты импорта, чтобы направить все удалённые приложения к одному URL React.

Каждая команда отвечает за своё удалённое приложение и развёртывает его, когда считает нужным. Хост не пересобирается: при следующей загрузке страницы он получает новые версии (или обновления после сброса кэша). Это полностью разделяет циклы выпуска.

Закрепляйте удалённые приложения за URL с версией (/v1/entry.js, /v2/entry.js), чтобы обновление хоста было намеренным, а не неявным. Некоторые команды используют сопоставление версий semver на уровне карты импорта с помощью таких инструментов, как JSPM.

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

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

Экспортируемые удалённым модулем сущности не имеют информации о типах хоста на этапе компиляции. Создавайте общие типы TypeScript в отдельном пакете, который используют обе стороны, или применяйте проверку во время выполнения (Zod, io-ts) на границе федерации.

Нативная федерация (карты импорта + ESM) проще и основана на стандартах, но не поддерживает координацию общих зависимостей, которую предоставляет Webpack. Выбирайте Webpack/Module Federation для сложных приложений с большим числом общих зависимостей, а нативный подход — для более простых конфигураций микроинтерфейсов.

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

Module Federation позволяет хосту загружать код независимо развёрнутых удалённых модулей во время выполнения. Инструменты Webpack 5 добавляют согласование общих зависимостей, а нативная федерация использует карты импорта и динамический импорт. Используйте этот подход в архитектурах микроинтерфейсов с несколькими командами, принимая дополнительную сложность в обмен на свободу независимого развёртывания.