𝗦𝗶𝗻𝗴𝗹𝗲𝗦𝗣𝗔 𝗪𝗼𝗿𝗸𝘀. 𝗜𝗺𝗽𝗼𝗿𝘁 𝗠𝗮𝗽𝘀 𝗗𝗼𝗻'𝘁 𝗠𝗮𝗻𝗮𝗴𝗲 𝗧𝗵𝗲𝗺𝘀𝗲𝗹𝘃𝗲𝘀
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.
Wir haben ein Tool gebaut, um dies zu beheben. Es erledigt zwei Dinge:
- Es erstellt eine Versionsmatrix aus der package.json jedes MFE.
- Es vergleicht diese Matrix mit Ihrer Import Map.
Das Tool zeigt Ihnen die Lücke auf. Es zeigt Ihnen, welche Teams konform sind und welche Teams abgewichen sind. Es findet zudem veraltete Einträge und defekte URLs. Wir lassen es jeden Montagmorgen laufen. Es dauert 12 Sekunden.
Unsere Lehre war nicht technischer Natur. Jede verteilte Architektur benötigt einen Verantwortlichen für die gemeinsame Infrastruktur. In SingleSPA ist die Import Map die Infrastruktur. Behandeln Sie sie nicht wie eine gemeinsam genutzte Datei. Behandeln Sie sie wie ein verwaltetes Asset.
Wie gehen Sie damit um? Haben Sie einen Verantwortlichen für die Import Map? Oder verbringen Sie Ihre Montagmorgen damit, Dateien mit grep zu durchsuchen?
Quelle: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe