Webpack Module Federation: Host + Remote

Минимальный пример использования Webpack Module Federation с React.

Module Federation позволяет нескольким независимо собираемым приложениям загружать JavaScript-модули друг у друга во время выполнения. Благодаря этому части интерфейса можно разрабатывать, собирать и публиковать отдельно, но использовать их так, словно они входят в одно приложение.

Каждая Webpack-сборка в Module Federation является контейнером. Она может предоставлять собственные модули другим приложениям, подключать внешние модули или совмещать обе роли.

Host и Remote

В этом примере используются две сборки:

• host — основное приложение, которое подключает внешний компонент;
• remote — приложение, которое предоставляет компонент RemoteComponent.

remote публикует специальный файл remoteEntry.js. В нём содержится информация о доступных модулях и способах их загрузки.

host подключает этот файл и импортирует компонент следующим образом:

const RemoteComponent = React.lazy(
  () => import('remoteApp/RemoteComponent'),
);

Названия host и remote обозначают роли сборок, а не отдельные типы приложений. Одна и та же сборка может одновременно предоставлять свои модули и использовать модули других сборок.

Структура проекта

.
├── host
│   ├── src
│   ├── package.json
│   └── webpack.config.js
├── remote
│   ├── src
│   ├── package.json
│   └── webpack.config.js
└── README.md

Remote

• запускается на http://localhost:8082;
• предоставляет RemoteComponent;
• публикует контейнер remoteApp;
• формирует файл remoteEntry.js.

Host

• запускается на http://localhost:8081;
• подключает контейнер remoteApp;
• загружает RemoteComponent динамически;
• использует Suspense во время загрузки и ErrorBoundary при ошибке.

React и React DOM объявлены общими singleton-зависимостями, чтобы обе сборки использовали один экземпляр React.

Запуск

Требуются Node.js и npm.

Установите зависимости из корня репозитория:

npm i --prefix remote
npm i --prefix host

Запустите remote:

npm start --prefix remote

В отдельном терминале запустите host:

npm start --prefix host

Откройте:

http://localhost:8081

Самостоятельную страницу remote можно открыть по адресу:

http://localhost:8082

Сборка

npm run build --prefix remote
npm run build --prefix host

Ограничения примера

Проект предназначен для знакомства с Module Federation и не является готовым production-шаблоном.

В реальном приложении дополнительно потребуются:

• настраиваемый адрес remote;
• стратегия версионирования общих зависимостей;
• обработка недоступности удалённых приложений;
• кэширование и версионирование remoteEntry.js;
• независимый процесс публикации каждой сборки;
• мониторинг ошибок загрузки удалённых модулей.

License

MIT