Какие технологии будешь использовать для разделения монолита на микрофронт?

Технологии для разделения монолита на микрофронт

Микрофронтенд (Micro Frontend) — это архитектурный подход, при котором фронтенд разбивается на независимые, самостоятельные части (модули), которые разрабатываются и развертываются отдельно. Это аналог микросервисов, но для фронтенда.

Проблемы монолита

Перед тем как выбрать технологию, важно понять, почему монолит — это проблема:

// Монолит: один огромный бандл
// app.js (5MB+)
// - User Management
// - Products
// - Orders
// - Analytics
// - Admin Panel
// - Reports
// Все загружается даже если пользователь не нужна админ-панель

// Микрофронт: независимые приложения
// shell-app.js (100KB) — shell/container
// user-app.js (200KB) — отдельное приложение
// products-app.js (300KB) — отдельное приложение
// admin-app.js (400KB) — загружается только для админов
// Каждое приложение независимо, разная команда может работать

Основные технологии для микрофронтенда

1. Module Federation (Webpack 5)

Это наиболее современный и рекомендуемый подход. Webpack 5 позволяет загружать код из других приложений на лету.

Конфигурация Host (Shell):

// webpack.config.js (главное приложение)
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "shell",
      filename: "remoteEntry.js",
      remotes: {
        users: "users@http://localhost:3001/remoteEntry.js",
        products: "products@http://localhost:3002/remoteEntry.js",
        orders: "orders@http://localhost:3003/remoteEntry.js"
      },
      shared: ["react", "react-dom"]  // Общие зависимости
    })
  ]
};

Конфигурация Remote (Микрофронт):

// webpack.config.js (приложение Users)
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "users",
      filename: "remoteEntry.js",
      exposes: {
        "./UserModule": "./src/UserModule",
        "./UserList": "./src/components/UserList"
      },
      shared: ["react", "react-dom"]
    })
  ]
};

Использование в Shell:

import React, { lazy, Suspense } from "react";

const UserModule = lazy(() => import("users/UserModule"));
const ProductsList = lazy(() => import("products/ProductsList"));

function App() {
  return (
    <div>
      <h1>Главное приложение</h1>
      <Suspense fallback={<div>Загрузка...</div>}>
        <UserModule />
      </Suspense>
      <Suspense fallback={<div>Загрузка...</div>}>
        <ProductsList />
      </Suspense>
    </div>
  );
}

Преимущества Module Federation:

• Встроено в Webpack 5
• Разделение кода между приложениями
• Динамическая загрузка модулей
• Поддержка общих зависимостей
• Хорошая производительность

Недостатки:

• Нужен Webpack 5+
• Сложность настройки
• Версионирование dependencies может быть трудным

2. Single-SPA

Библиотека для регистрации и управления микрофронтендами как отдельными SPA приложениями.

Shell приложение:

import { registerApplication, start } from "single-spa";

// Регистрируем микрофронты
registerApplication({
  name: "@myapp/users",
  app: () => System.import("@myapp/users"),
  activeWhen: "/users"
});

registerApplication({
  name: "@myapp/products",
  app: () => System.import("@myapp/products"),
  activeWhen: "/products"
});

registerApplication({
  name: "@myapp/orders",
  app: () => System.import("@myapp/orders"),
  activeWhen: "/orders"
});

start();

Микрофронт (Users):

import React from "react";
import ReactDOM from "react-dom";
import UserApp from "./App";

// Экспортируем lifecycle методы для single-spa
export async function bootstrap() {
  console.log("Bootstrap users app");
}

export async function mount() {
  ReactDOM.render(<UserApp />, document.getElementById("users-root"));
}

export async function unmount() {
  ReactDOM.unmountComponentAtNode(document.getElementById("users-root"));
}

Преимущества Single-SPA:

• Простая регистрация приложений
• Управление lifecycle
• Хорошо подходит для маршрутизации
• Поддержка разных фреймворков (React, Vue, Angular)

Недостатки:

• Нужна отдельная библиотека
• Сложность с общим состоянием
• Требует правильной структуры приложений

3. Qiankun (蚂蚁金服)

Китайская библиотека от Ant Financial, построенная поверх single-spa.

import { registerMicroApps, start } from "qiankun";

registerMicroApps([
  {
    name: "@myapp/users",
    entry: "http://localhost:3001",
    container: "#users-container",
    activeRule: "/users"
  },
  {
    name: "@myapp/products",
    entry: "http://localhost:3002",
    container: "#products-container",
    activeRule: "/products"
  }
]);

start();

Преимущества:

• Полная изоляция микрофронтов
• Управление глобальным состоянием
• Простой API
• Поддержка разных фреймворков

4. Bit.dev

Платформа для компонентизации и распределения компонентов между приложениями.

# Экспортируем компонент в Bit
bit export myapp.components/button

# Импортируем в другое приложение
npm install @myapp/components.button

import { Button } from "@myapp/components.button";

export function MyPage() {
  return <Button>Нажми меня</Button>;
}

Преимущества:

• Компонентная архитектура
• Версионирование компонентов
• Документация и версионирование встроены
• Удобство использования

5. Web Components

Нативный стандарт браузера для создания переиспользуемых компонентов.

// CustomElement
class UserCard extends HTMLElement {
  connectedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = `
      <div class="user-card">
        <h2>${this.getAttribute("name")}</h2>
        <p>${this.getAttribute("email")}</p>
      </div>
    `;
  }
}

customElements.define("user-card", UserCard);

<!-- Использование в HTML -->
<user-card name="Alice" email="alice@example.com"></user-card>

Преимущества:

• Полная изоляция (Shadow DOM)
• Работает с любым фреймворком
• Нативная поддержка браузером

Недостатки:

• Сложнее работать с состоянием
• Хуже производительность
• Меньше экосистемы

Сравнение подходов

Рекомендуемая архитектура

Microfrontend Architecture
├── Shell (Host)
│   ├── Navigation
│   ├── Layout
│   └── Shared Context (Auth, Theme)
├── Users Microfrontend
│   ├── API requests
│   └── Components
├── Products Microfrontend
│   ├── API requests
│   └── Components
└── Orders Microfrontend
    ├── API requests
    └── Components

Практический пример с Module Federation + Next.js

// next.config.js (Shell)
const withModuleFederation = require("@module-federation/nextjs-mf");

module.exports = withModuleFederation({
  name: "shell",
  remotes: {
    users: "users@http://localhost:3001/_next/static/remoteEntry.js",
    products: "products@http://localhost:3002/_next/static/remoteEntry.js"
  },
  shared: ["react", "react-dom"]
});

Мой выбор

Для разделения монолита на микрофронтенд я бы выбрал:

1. Module Federation + Next.js — если используются современные технологии
2. Single-SPA — если нужна простота и поддержка разных фреймворков
3. Qiankun — если нужна полнофункциональность и изоляция

Всё зависит от:

• Размера приложения
• Количества команд
• Требований к производительности
• Нужна ли полная изоляция микрофронтов

Модule Federation — это будущее микрофронтендов благодаря поддержке Webpack 5 и удобству использования.