Как Single-SPA загружает приложения — через SystemJS или import map?

Как Single-SPA загружает приложения

Single-SPA — это фреймворк для микросервисной архитектуры на фронтенде. Он позволяет запускать несколько независимых приложений на одной странице. Ключевой вопрос — как эти приложения загружаются в браузер. Ответ: через комбинацию import map и SystemJS.

Import map — это стандарт браузера, который определяет, как разрешаются имена модулей при импорте. В Single-SPA import map задает соответствие между именем приложения (например, 'app1') и URL его JavaScript-файла. SystemJS — это загрузчик модулей, который умеет работать с import map и поддерживает динамическую загрузку модулей в браузере, даже если браузер не поддерживает import map нативно.

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

// index.html
<script type="systemjs-importmap">
  {
    "imports": {
      "app1": "http://localhost:3001/app1.js",
      "app2": "http://localhost:3002/app2.js"
    }
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>
<script>
  System.import('app1'); // загружает app1.js
</script>

В этом примере import map указывает, что модуль 'app1' находится по адресу localhost:3001. SystemJS читает эту карту и загружает нужный файл. Single-SPA использует SystemJS для загрузки корневого конфигурационного файла и всех зарегистрированных приложений.

Почему это важно

Без SystemJS и import map Single-SPA не смог бы динамически подгружать приложения по требованию. Это позволяет развертывать приложения независимо: команда может обновить app1, не затрагивая app2. Также это упрощает управление версиями и зависимостями между микросервисами.

Вывод: Single-SPA использует import map для описания доступных модулей и SystemJS для их загрузки в браузере. Это стандартный подход в микросервисной архитектуре фронтенда, который обеспечивает гибкость и масштабируемость.