SingleSPA працює. Import maps не керують собою самі

SingleSPA працює. Ми запускаємо додатки React, Vue та Angular на одній сторінці. Вони завантажуються незалежно. Фреймворк справляється зі своїм завданням.

Проблема не у фреймворку. Проблема в екосистемі навколо нього.

У розподіленій архітектурі вам потрібна відповідальність (ownership). Вам потрібен аудит. Вам потрібне управління (governance). SingleSPA робить ці потреби видимими, оскільки import map є центральною точкою координації.

Import map знаходиться у вашому root config. Це JSON-файл. Він вказує кожному мікрофронтенду (MFE), яку версію React завантажувати. Теоретично, це єдине джерело істини (source of truth). На практиці ж, ніхто за нього не відповідає.

Кожна команда володіє власним MFE. Але ніхто не володіє map.

Це створює проблеми:

  • Команди виводять MFE з експлуатації, але запис залишається в map.
  • З'являються нові залежності, але ніхто не додає їх до map.
  • Map деградує, поки ви його ігноруєте.

Ми знайшли в нашій map MFE, який не розгортався вісім місяців. Він був «мертвим», але все одно завантажувався в продакшені. Ніхто цього не помітив, бо ніхто не перевіряв.

Ви можете подумати про автогенерацію map під час збірки. Ми пробували це. Це створює нову проблему: конфлікти злиття (merge conflicts). Якщо чотирнадцять команд намагатимуться записати дані в один JSON-файл під час кожного деплою, ваш CI-пайплайн перетвориться на хаос.

Ще одна проблема — розсинхронізація (drift). Паттерн простий: позначте React як external у вашому конфігу. Нехай його надає import map. Це запобігає дублюванню бандлів.

Але потім хтось проводить рефакторинг коду. Вони випадково знову включають React у бандл свого MFE. Збірка проходить успішно. Тести проходять. Деплой — «зелений».

Ви помітите це лише тоді, коли:

  • Розмір бандлів різко зросте.
  • Невідповідність версій зламає компонент.
  • Ви побачите, що React завантажується двічі в Chrome DevTools.

Ми провели аудит нашої системи та виявили два MFE, які постачають власний React. Їхні збірки були успішними. Вони навіть не підозрювали, що порушують правила (compliance).

Import map та ваші файли package.json — це два окремі входи. Вони тихо розсинхронізуються.

Перевірка в CI може виявити дубльовані бандли. Але вона не може виявити невідповідність версій. Якщо MFE A використовує React 18.2, а MFE B — 18.3, збірка не завершиться помилкою. Проте ваші спільні компоненти зламаються під час виконання (at runtime).

Коли нам потрібно оновити React, ми витрачаємо години на пошук (grep) по чотирнадцяти різним репозиторіях. Це неефективно.

Ми створили інструмент, щоб виправити це. Він робить дві речі:

  1. Він будує матрицю версій на основі package.json кожного MFE.
  2. Він порівнює цю матрицю з вашою import map.

Інструмент показує вам розрив. Він показує, які команди дотримуються стандартів, а які — відхилилися від них. Він також знаходить застарілі записи та неробочі URL-адреси. Ми запускаємо його щопонеділка вранці. Це займає 12 секунд.

Наш урок був не технічним. Кожна розподілена архітектура потребує власника спільної інфраструктури. У SingleSPA import map — це інфраструктура. Не ставтеся до неї як до спільного файлу. Ставтеся до неї як до керованого активу.

Як ви з цим справляєтеся? Чи є у вас власник import map? Чи ви проводите понеділкові ранки, виконуючи grep по файлах?

Джерело: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe