Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про JavaScript: micro frontends, build time integration, iframe, server-side composition, routing

В чем особенности подхода без Module Federation при построении микрофронтов?

Вопрос проверяет понимание классических подходов к микрофронтендам до появления Module Federation, чтобы оценить знание эволюции архитектуры и компромиссов.

Короткий ответ

Без Module Federation микрофронтенды интегрируются на этапе сборки или на стороне сервера. Основные подходы: сборка всех модулей в один бандл (build-time), использование iframe для изоляции, компоновка на сервере (SSI, Edge-Side Includes) или клиентская маршрутизация с загрузкой отдельных приложений. Эти методы часто требуют пересборки всего приложения для обновления, создают сильную связность или проблемы с производительностью и совместным использованием состояния.

Длинный ответ

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

Основные подходы без Module Federation

  • Интеграция на этапе сборки (Build-time Integration): Отдельные приложения собираются как пакеты (npm-пакеты) и импортируются в основное "контейнерное" приложение как зависимости. Для обновления любого микрофронта требуется пересобрать и переразвернуть всё приложение. Это сводит на нет независимость развертывания.
  • Интеграция на стороне сервера (Server-Side Composition): Сервер (например, с помощью Nginx, или бэкенд-приложение) собирает HTML-фрагменты от разных сервисов. Используются технологии вроде Server-Side Includes (SSI) или Edge-Side Includes (ESI). Пользователь получает уже собранную страницу. Это обеспечивает хорошую производительность, но усложняет серверную логику и может создать зависимость от сети.
  • Интеграция через iframe: Каждый микрофронт загружается в отдельный iframe. Это обеспечивает полную изоляцию CSS и JavaScript, но сильно ограничивает взаимодействие между частями (сложный обмен данными, проблемы с навигацией и SEO) и создает накладные расходы.
  • Интеграция на стороне клиента через маршрутизацию

    В этом подходе "контейнерное" приложение отвечает за маршрутизацию. В зависимости от URL, оно динамически загружает и монтирует JavaScript-бандл нужного микрофронта. Это можно сделать с помощью систематической загрузки скриптов.

    // Упрощенный пример: контейнер загружает скрипт микрофронта
    const loadMicroFrontend = (name, scriptUrl) => {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = scriptUrl;
        script.onload = () => {
          // Предполагается, что скрипт экспортирует глобальную функцию для рендеринга
          window[`render${name}`](`${name}-container`);
          resolve();
        };
        script.onerror = reject;
        document.head.appendChild(script);
      });
    };
    // При переходе на маршрут '/app1'
    loadMicroFrontend('App1', 'http://cdn.example.com/app1.bundle.js');

    Этот метод сохраняет независимость развертывания, но требует тщательного управления глобальным пространством имен, версиями библиотек (проблема duplicate dependencies) и сложной координацией загрузки.

    Проблемы и ограничения

    • Дублирование зависимостей: Каждый микрофронт может включать свои копии React, Vue и т.д., что увеличивает размер загружаемого кода.
    • Отсутствие общей среды выполнения: Сложно делиться состоянием или компонентами между микрофронтами без костылей (например, через global window object).
    • Сложность обновлений: В подходе build-time для обновления кнопки в одном микрофронте нужно пересобрать весь монолит.
    • Проблемы с изоляцией стилей: CSS одного микрофронта может влиять на другие, если не использовать строгие методологии или iframe.

    Вывод: Классические подходы к микрофронтендам позволяют достичь организационной декомпозиции и независимости команд, но часто жертвуют технической эффективностью, производительностью или простотой интеграции. Они полезны в сценариях, где критически важна серверная сборка для SEO или где команды работают над полностью изолированными частями приложения с минимальным взаимодействием.

Уровень

  • Рейтинг:

    4

  • Сложность:

    7

Навыки

  • JavaScript

    JavaScript

  • React

    React

Ключевые слова

#micro frontends

#build time integration

#iframe

#server-side composition

#routing

Подпишись на React Developer в телеграм