Что такое Single SPA?

1.0 Junior🔥 161 комментариев

#JavaScript Core#Архитектура и паттерны

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

🐱

claude-haiku-4.5PrepBro AI22 мар. 2026 г.(ред.)

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

Single SPA — Single Page Application Architecture

Single SPA (Single Page Application) — это архитектурный паттерн и JavaScript библиотека, которая позволяет создавать микрофронтенды и управлять множеством независимых приложений внутри одного браузера. Это решение для масштабирования больших фронтенд проектов.

Основная идея

Вместо одного монолитного приложения, приложение разделяется на несколько независимых микроприложений (micro-apps), которые:

Загружаются динамически
Работают независимо
Имеют свои зависимости
Могут разрабатываться разными командами
Могут обновляться независимо друг от друга

Как это работает

// 1. Главное приложение (Shell Application)
// index.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/single-spa@5/dist/system/single-spa.js"></script>
  </head>
  <body>
    <main id="main-app"></main>
    
    <script>
      // Регистрируем микроприложения
      
      // 1. Приложение "header"
      singleSpa.registerApplication({
        name: '@org/header',
        app: () => System.import('@org/header'),
        activeWhen: '/', // Всегда активна
      });
      
      // 2. Приложение "dashboard"
      singleSpa.registerApplication({
        name: '@org/dashboard',
        app: () => System.import('@org/dashboard'),
        activeWhen: '/dashboard',
      });
      
      // 3. Приложение "settings"
      singleSpa.registerApplication({
        name: '@org/settings',
        app: () => System.import('@org/settings'),
        activeWhen: '/settings',
      });
      
      // Запускаем Single SPA
      singleSpa.start();
    </script>
  </body>
</html>

Жизненный цикл микроприложения

// Каждое микроприложение имеет жизненный цикл

// dashboard.js (одно из микроприложений)
export async function bootstrap() {
  // Инициализация приложения
  console.log('Dashboard bootstrapping');
}

export async function mount() {
  // Монтирование приложения в DOM
  const container = document.getElementById('main-app');
  console.log('Dashboard mounting');
  
  // Рендеруем приложение (например, React, Vue, Angular)
  ReactDOM.render(
    <Dashboard />,
    container
  );
}

export async function unmount() {
  // Удаление приложения из DOM
  console.log('Dashboard unmounting');
  ReactDOM.unmountComponentAtNode(
    document.getElementById('main-app')
  );
}

Практический пример архитектуры

┌─────────────────────────────────────────────┐
│        Shell Application (Main App)         │
│    (управляет маршрутизацией и т.д.)       │
└─────────────────────────────────────────────┘
                        ↓
┌──────────────┬──────────────┬──────────────┐
│   Header     │  Dashboard   │  Settings    │
│   Micro App  │  Micro App   │  Micro App   │
│ (React 19)   │ (Vue 3)      │ (Angular)    │
│ Port: 3001   │ Port: 3002   │ Port: 3003   │
└──────────────┴──────────────┴──────────────┘

Каждое микроприложение:

Может быть написано на разных фреймворках
Разрабатывается независимо
Имеет свой build процесс
Деплоится независимо

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

1. Независимость команд

// Команда A разрабатывает Dashboard
// Команда B разрабатывает Settings
// Они работают полностью независимо

// dashboard/package.json
{
  "name": "@org/dashboard",
  "version": "1.2.3",
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

// settings/package.json
{
  "name": "@org/settings",
  "version": "2.1.0",
  "dependencies": {
    "vue": "^3.0.0" // Другой фреймворк!
  }
}

2. Независимое деплоирование

# Обновляем только Dashboard
npm run build
aws s3 cp dist s3://my-bucket/dashboard/ --recursive

# Settings остается неизменным
# Header остается неизменным

3. Общие зависимости

// shared-dependencies.js
const system = {
  react: 'https://cdn.jsdelivr.net/npm/react@19/dist/react.production.min.js',
  'react-dom': 'https://cdn.jsdelivr.net/npm/react-dom@19/dist/react-dom.production.min.js',
  lodash: 'https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js'
};

// Все микроприложения используют одну версию React
// Экономия трафика и памяти

Практический пример с Webpack Module Federation

// Shell App (Webpack config)
// webpack.config.js
const ModuleFederation = require("@webpack-cli/serve/dist/utils/ModuleFederationPlugin");

module.exports = {
  plugins: [
    new ModuleFederation({
      name: "shell",
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true }
      },
      remotes: {
        dashboard: "dashboard@http://localhost:3002/remoteEntry.js",
        settings: "settings@http://localhost:3003/remoteEntry.js"
      }
    })
  ]
};

// Dashboard Micro App (Webpack config)
module.exports = {
  plugins: [
    new ModuleFederation({
      name: "dashboard",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App"
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true }
      }
    })
  ]
};

Когда использовать Single SPA

Хорошо подходит когда:

Большое приложение с многими независимыми модулями
Разные команды разрабатывают разные части
Нужна возможность независимого деплоя
Нужна гибкость в выборе фреймворка для разных частей
Требуется масштабируемость

Не подходит когда:

Маленький проект
Простое приложение
Кроссбраузерность критична (IE11)
Повышенная сложность нежелательна

Вызовы и решения

Проблема 1: Управление состоянием

// Необходимо делиться состоянием между микроприложениями
// Решение: Global Store

const globalStore = {
  user: null,
  notifications: [],
  setUser(user) { this.user = user; },
  addNotification(notification) { this.notifications.push(notification); }
};

// Каждое микроприложение может использовать globalStore

Проблема 2: Конфликты версий библиотек

// Решение: Singleton shared dependencies
shared: {
  react: {
    singleton: true,
    strictVersion: false,
    requiredVersion: "^19.0.0"
  }
}

Проблема 3: Ошибки в одном приложении могут сломать всё

// Решение: Error boundaries и изоляция ошибок
singleSpa.addErrorHandler((error) => {
  if (error.type === 'mount') {
    console.error('Error mounting app:', error);
    // Не позволяем ошибке распространяться
  }
});

Примеры использования в производстве

Spotify: Использует похожий подход для своего веб-приложения
Google Cloud Console: Масштабное приложение с микрофронтендами
Slack: Независимые модули приложения

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