PrepBro
← Назад к вопросам

Какие знаешь виды микрофронтендов?

2.0 Middle🔥 182 комментариев
#JavaScript Core

Комментарии (2)

🐱
deepseek-v3.2PrepBro AI4 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Виды микрофронтендов

Микрофронтенды — это архитектурный подход, который позволяет разделить монолитное фронтенд-приложение на независимые, самостоятельно разрабатываемые и развертываемые модули. Существует несколько ключевых видов микрофронтендов, различающихся по способу интеграции, управлению зависимостями и этапу сборки. Я выделю основные подходы, которые используются в современной веб-разработке.

1. Микрофронтенды на основе сборки (Build-Time Integration)

Этот подход предполагает интеграцию микрофронтендов на этапе сборки приложения. Каждый модуль публикуется как пакет (например, npm-пакет), а основное приложение включает их как зависимости. Этот метод близок к традиционной модульной архитектуре.

// Пример package.json основного приложения
{
  "dependencies": {
    "@company/auth-module": "^1.2.0",
    "@company/dashboard-module": "^2.0.0"
  }
}

Плюсы:

  • Простота реализации, так как используются стандартные инструменты сборки (Webpack, Vite).
  • Возможность tree-shaking для оптимизации бандла.
  • Централизованное управление версиями.

Минусы:

  • Отсутствие независимого развертывания: для обновления одного модуля требуется пересборка всего приложения.
  • Риск конфликтов зависимостей (например, разные версии React).
  • Медленный процесс развертывания из-за необходимости полной сборки.

2. Микрофронтенды на основе сервера (Server-Side Integration / SSR)

Здесь интеграция происходит на стороне сервера. Сервер (Node.js, PHP, Java) комбинирует HTML-фрагменты от различных микрофронтендов в единый ответ для браузера. Часто используется техника SSI (Server-Side Includes) или более современные фреймворки.

<!-- Пример с использованием Nginx и SSI -->
<html>
<body>
  <!--#include virtual="/fragments/header" -->
  <!--#include virtual="/fragments/main-content" -->
  <!--#include virtual="/fragments/footer" -->
</body>
</html>

Плюсы:

  • Хорошая SEO-оптимизация, так как браузер получает готовый HTML.
  • Единая точка входа для всех модулей.
  • Возможность использования разных технологий на сервере для каждого микрофронтенда.

Минусы:

  • Усложнение серверной инфраструктуры.
  • Риск увеличения времени ответа сервера из-за задержек в отдельных модулях.
  • Сложности с кэшированием фрагментов.

3. Микрофронтенды на основе клиента (Client-Side Integration)

Наиболее популярный подход, где интеграция происходит непосредственно в браузере. Основное приложение (shell или host) динамически загружает и рендерит микрофронтенды во время выполнения. Существует два основных подвида:

а) Iframe-based

Каждый микрофронтенд загружается в отдельный <iframe>, что обеспечивает полную изоляцию стилей и JavaScript.

<iframe src="https://checkout.example.com" width="100%" height="500"></iframe>

Плюсы: Полная изоляция контекста и стилей, простота интеграции. Минусы: Сложности с responsiveness, ограниченное взаимодействие между модулями, проблемы с SEO.

б) JavaScript-based (динамическая загрузка модулей)

Основное приложение динамически загружает бандлы микрофронтендов (часто как UMD-модули или через систему модулей Federated от Webpack 5) и рендерит их в DOM. Это самый гибкий и распространенный метод.

// Пример с использованием Module Federation (Webpack 5)
// Конфигурация хоста
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    auth: 'auth@https://cdn.example.com/auth/remoteEntry.js',
    dashboard: 'dashboard@https://cdn.example.com/dashboard/remoteEntry.js'
  }
});

// Динамическая загрузка в коде
const { AuthApp } = await import('auth/AuthApp');

Плюсы:

  • Полная независимость разработки и развертывания каждого микрофронтенда.
  • Возможность использовать разные фреймворки (React, Vue, Angular) в одном приложении.
  • Высокая производительность за счет lazy loading и разделения бандлов.

Минусы:

  • Сложность реализации: необходимы механизмы для изоляции стилей, управления состоянием и маршрутизации.
  • Риск конфликтов глобальных переменных и стилей.
  • Требует тщательного планирования архитектуры и инфраструктуры.

4. Микрофронтенды на основе Edge (Edge-Side Includes)

Продвинутый подход, где интеграция происходит на edge-серверах (CDN уровня, например, Cloudflare Workers, AWS Lambda@Edge). Это позволяет комбинировать контент ближе к пользователю, уменьшая задержки.

// Пример на Cloudflare Workers
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const [header, content] = await Promise.all([
    fetch('https://service-a.com/header'),
    fetch('https://service-b.com/content')
  ]);
  return new HTMLRewriter()
    .on('div#header', new ElementHandler(header))
    .on('div#content', new ElementHandler(content))
    .transform(await fetch('https://main-app.com/template'));
}

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

Критерии выбора подхода

При выборе вида микрофронтендов следует учитывать:

  • Масштаб команды: Для небольших команд подойдут сборные или iframe-решения, для больших распределенных — JavaScript-based.
  • Требования к SEO: Если SEO критично, рассматривайте серверную или edge-интеграцию.
  • Гетерогенность стека: Если используются разные фреймворки, JavaScript-based подход с Module Federation — оптимален.
  • Инфраструктура: Наличие DevOps-ресурсов для настройки сложных клиентских или edge-решений.

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

Какие знаешь виды микрофронтендов? | PrepBro