Безопасно отображайте динамические удаленные приложения React с помощью Module Federation.

Как мы можем безопасно, эффективно и эффективно использовать Динамические удаленные контейнеры Webpack Module Federation в приложении React microfrontend?

Начнем с видения того, что мы хотим:

RemoteComponent — это компонент React, который мы можем использовать в нашем приложении для рендеринга модулей из удаленного приложения. Он инкапсулирует:

  • ErrorBoundary для безопасного рендеринга удаленного кода без нарушения работы нашего хост-приложения.
  • Отложенная загрузка для разрешения удаленного кода по мере необходимости без блокировки рендеринга остальной части нашего приложения.
  • Получение и управление динамическими удаленными контейнерами.

Вот реализация:

Мы лениво загружаем Component, который мы получаем из loadComponent(), и оборачиваем его вокруг ErrorBoundary, чтобы предотвратить сбой всего приложения, если что-то пойдет не так. При загрузке удаленного приложения мы используем React.Suspense для отображения индикатора загрузки.

useRemoteUrl() — это хук React, управляющий URL-адресами наших удаленных приложений. Детали не имеют решающего значения для этого примера, но вы можете реализовать управление URL-адресами разными способами в зависимости от вашего варианта использования. Важным моментом является то, что мы можем получить URL-адрес для передачи утилите loadComponent, которая управляет удаленными контейнерами:

Мы загружаем удаленное приложение только один раз, даже если повторно используем его компоненты в нашем приложении. Контейнер, который мы извлекаем, должен соответствовать интерфейсу get/init, ожидаемому Module Federation. Лучше всего это работает, если в конфигурации Webpack нашего удаленного приложения используется подключаемый модуль Module Federation.

fetchRemote() обрабатывает получение файла remoteEntry.js удаленного приложения. Во-первых, он создает новый тег script, а затем внедряет его в DOM для получения удаленного javascript:

Вуаля! У нас есть механизм для надежного извлечения и рендеринга удаленных приложений в нашем микроинтерфейсе React.

Теперь давайте посмотрим на это в действии:

Посмотрите живой пример здесь: https://micro-frontend-demo-main.vercel.app/

Исходный код: ссылка

Пошаговое руководство по использованию Module Federation в React можно найти в одной из моих других статей:



Как использовать федерацию модулей Webpack в React
С легкостью создавать микроинтерфейсные архитектурыbetterprogramming.pub