Caching für dynamische Imports

Bei dynamischen Imports erzeugen mehrere Imports desselben Moduls jeweils separate Promises. Mit einem Cache lassen sich Imports desselben Pfads über ein einziges Promise abwickeln.

type ModuleCache = Map<string, Promise<unknown>>;

const modCache: ModuleCache = new Map();

export async function dynamicImport<T = unknown>(path: string): Promise<T> {
  const cache = modCache.get(path);
  if (cache) return cache as Promise<T>;

  const modPromise = import(path) as Promise<T>;
  modCache.set(path, modPromise);
  return modPromise;
}

Wo es in der Praxis wirkt

Dieses Muster hilft vor allem dann, wenn parallele Imports gleichzeitig auf dasselbe Modul zielen können. Es passt gut zu Lazy-Dialogs, Admin-Widgets oder Command-Palettes, in denen derselbe Import-Race leicht mehrfach ausgelöst wird.

Die wichtigste Designfrage ist, ob auch fehlgeschlagene Promises im Cache bleiben sollen. Wenn ein Retry vorgesehen ist, ist es meist einfacher, den Cache-Eintrag bei Fehlern zu löschen.

Praxishinweis

Dieses Snippet passt gut, wenn dieselbe Operation oder Prüfung im Umfeld von typescript, javascript, performance nicht immer wieder neu geschrieben werden soll. Als kleine Hilfsfunktion bleibt aufrufender Code leichter lesbar.

Wenn jedoch Verzweigungen und Voraussetzungen zunehmen, sollte nicht alles in ein einziges Snippet gepackt werden. Getrennte Schritte und klar abgegrenzte Helfer bleiben auf Dauer wartbarer.

Implementierungsnotiz

Für die Wiederverwendung hilft es, Eingabe, Ausgabe und Nebenwirkungen zuerst festzulegen. Bei Caching für dynamische Imports wird aufrufender Code lesbarer, wenn klar ist, was im Kontext typescript, javascript, performance überhaupt verkürzt werden soll.

Nicht jede Vorbedingung muss in dasselbe Snippet wandern. Stabiler bleibt die Lösung, wenn Verantwortung beim Aufrufer und Verantwortung im Snippet sauber getrennt werden.