Module Federation: простая загрузка динамических модулей

Всем привет! Меня зовут Евгений, я работаю frontend-разработчиком в платформенной команде. Моя задача — помогать другим frontend-разработчикам выполнять их задачи эффективнее. Мы в Delivery Club больше года назад внедрили подход с микрофронтендами, о чём писали здесь. Вы можете найти и много других статей с описанием этого подхода.

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

Суть плагина Module Federation

Раньше, чтобы загрузить внутри веб-приложения какую-либо часть другого веб-приложения приходилось использовать iframe. Если нужна была двусторонняя связь, то приходилось создавать «костыли» для обмена событиями. Например, чтобы обработать точечные клики внутри или снаружи iframe.

Плагин Module Federation позволяет делать то же самое более понятно: вы можете загружать целые модули веб-приложения, которые не были там изначально, прямо в коде во время исполнения. Для этого можно использовать нативный import(), а через него загружать всё, что угодно: строку, объект, функцию или регистрировать полноценный веб-компонент.

Далее будем пользоваться терминами: 

• Host-приложение — загружает в себя какой-либо удалённый модуль или целое веб-приложение.

• Удалённый модуль — удалённое фронтенд-приложение, которое загружается в host-приложение.

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

Я опишу два способа загрузки удалённых модулей с помощью:

1. статического адреса, то есть не меняющегося;

2. динамического адреса, который меняться по каким-то условиям. Например, в Delivery Club мы используем динамические адреса для версионирования приложения по тегу сборки, и они регулярно меняются. 

Демо-проект

В статье я буду демонстрировать код из репозитория на Github. А в примерах буду показывать загрузку веб-компонентов через удаленные модули, поскольку это самый интересный и полезный случай. Аналогично можно будет загружать модули с любым другим содержимым.

В репозитории есть две директории с примерами загрузки веб-компонента: 

• static-url со статического адреса;

• dynamic-url с динамического адреса.

Статические удалённые модули

Обратимся к документации Webpack по Module Federation. В случае со статическим адресом всё просто: указываем название и адрес удаленного модуля (рис. 1), а host-приложение забирает его по указанному адресу.

Рассмотрим пример с загрузкой веб-компонента. Приведенный код можно найти в репозитории на GitHub в директории static-url.

Host-приложение — app1

В app1 выполняем три шага:

1. В index.ts загружаем модуль, например, через import(), и вставляем полученное содержимое в div в разметке. 

const div = document.getElementById('div');

import("app2/main")
   .then(module => {
     console.log("