Федерация модулей: динамический импорт во время выполнения

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

Традиционный подход — публиковать общий код как пакет npm — означает, что для обновления общего компонента кнопки необходимо обновить пакет npm, опубликовать новую версию, обновить package.json каждого приложения-потребителя, пересобрать и повторно развернуть все приложения-потребители. Module Federation устраняет все эти шаги.

Module Federation позволяет одному приложению («удалённому») предоставлять JavaScript-модули, которые другое приложение («хост») загружает и выполняет во время работы, без пересборки или повторного развёртывания хоста. Когда пользователь загружает приложение-хост, оно динамически получает модули удалённого приложения по мере необходимости.

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

Удалённое приложение — это независимо разворачиваемое приложение, предоставляющее один или несколько модулей — компоненты React, утилиты или целые страницы функциональности — для использования другими приложениями. Удалённое приложение создаёт манифест remoteEntry.js, описывающий предоставляемые им модули и способ их загрузки.

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

Общие модули — это библиотеки, например React и React DOM, которые должны загружаться только один раз, даже если они включены и в хост, и в удалённое приложение. Если объявить React общим модулем с единственным экземпляром, Module Federation гарантирует запуск только одной версии React — это крайне важно, поскольку хуки React не работают с несколькими экземплярами.

При сборке удалённого приложения Webpack создаёт файл remoteEntry.js с указанным именем. Этот файл представляет собой лёгкий манифест и загрузочный скрипт: он объявляет предоставляемые удалённым приложением модули, перечисляет URL их фрагментов и инициализирует общую область. Хост сначала загружает этот файл, чтобы узнать, что предлагает удалённое приложение.

Когда хост встречает импорт из модуля удалённого приложения, он проверяет, загружен ли уже код этого удалённого приложения. Если нет, хост получает remoteEntry.js по URL удалённого приложения, инициализирует общую область, согласовывая версии общих библиотек, а затем загружает и выполняет конкретный фрагмент, содержащий запрошенный модуль.

Команда разворачивает новую версию удалённого приложения с обновлённым компонентом кнопки, не затрагивая приложение-хост. Следующий пользователь, загрузивший хост, автоматически получает новый компонент кнопки, поскольку хост всегда получает данные по текущему URL remoteEntry.js удалённого приложения. Пересборка хоста не требуется, повторное развёртывание хоста не требуется, координация не нужна.

В более старом подходе к микроинтерфейсам для изоляции разделов, принадлежащих командам, используются фреймы. Фреймы обеспечивают сильную изоляцию, но чрезвычайно усложняют совместное состояние, маршрутизацию URL и оформление. Module Federation сохраняет всё в одном контексте JavaScript, обеспечивая общую маршрутизацию, общее состояние аутентификации и единообразное оформление.

Какова роль remoteEntry.js в Module Federation?

Module Federation решает проблему независимого развёртывания общего фронтенд-кода, обеспечивая загрузку модулей во время выполнения. Удалённые приложения предоставляют модули через remoteEntry.js, а хосты динамически используют их без пересборки. Общие модули с единственным экземпляром, такие как React и React DOM, предотвращают повторную загрузку библиотек. Эта архитектура обеспечивает настоящее независимое развёртывание: обновите удалённое приложение — и все приложения-хосты сразу увидят изменения.