𝗦𝗶𝗻𝗴𝗹𝗲𝗦𝗣𝗔 𝗪𝗼𝗿𝗸𝘀. 𝗜𝗺𝗽𝗼𝗿𝘁 𝗠𝗮𝗽𝘀 𝗗𝗼𝗻'𝘁 𝗠𝗮𝗻𝗮𝗴𝗲 𝗧𝗵𝗲𝗺𝘀𝗲𝗹𝘃𝗲𝘀

SingleSPA works. We run React, Vue, and Angular apps on one page. They load independently. The framework delivers.

The problem is not the framework. The problem is the ecosystem around it.

In a distributed architecture, you need ownership. You need auditing. You need governance. SingleSPA makes these needs visible because the import map is a central point of coordination.

The import map lives in your root config. It is a JSON file. It tells every micro frontend (MFE) which version of React to load. In theory, it is the source of truth. In practice, nobody owns it.

Each team owns their own MFE. No one owns the map.

This creates problems:

  • Teams retire an MFE, but the entry stays in the map.
  • New dependencies appear, but no one adds them to the map.
  • The map rots while you ignore it.

We found an MFE in our map that had not been deployed in eight months. It was dead, but it was still loading in production. No one noticed because no one was looking.

You might think about auto-generating the map during a build. We tried that. It creates a new problem: merge conflicts. If fourteen teams all try to write to one JSON file during every deploy, your CI pipeline becomes a mess.

Another issue is drift. The pattern is simple: mark React as an external in your config. Let the import map serve it. This prevents duplicate bundles.

But then someone refactors their code. They accidentally bundle React back into their MFE. The build passes. The tests pass. The deploy is green.

You only notice when:

  • Bundle sizes spike.
  • A version mismatch breaks a component.
  • You see React loading twice in Chrome DevTools.

We audited our system and found two MFEs shipping their own React. Their builds were green. They had no idea they were out of compliance.

The import map and your package.json files are two separate inputs. They drift apart quietly.

A CI check can find duplicate bundles. It cannot find version mismatches. If MFE A uses React 18.2 and MFE B uses 18.3, the build will not fail. But your shared components will break at runtime.

When we need to update React, we spend hours grepping through fourteen different repositories. This is inefficient.

Мы создали инструмент, чтобы решить эту проблему. Он делает две вещи:

  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