Hot Module Replacement (HMR): So funktioniert es

Was ist Hot Module Replacement (HMR)?

Hot Module Replacement (HMR) tauscht Module in einer laufenden Anwendung aus, fügt sie hinzu oder entfernt sie, ohne die Seite komplett neu zu laden. Ein Dev-Server schickt das geänderte Modul an den Browser, der die neue Version ausführt und, wenn möglich, Zustand wie Formulareingaben und die aktuelle Route behält. HMR ist ein Entwicklungswerkzeug, keine Produktionsfunktion.

Wie HMR funktioniert

Bundler oder Dev-Server beobachten Ihre Dateien und halten eine Verbindung zur Seite, meist per WebSocket. Beim Speichern wird nur das Geänderte neu kompiliert und als Update gesendet. In webpack erzeugt der Compiler ein aktualisiertes Manifest plus die geänderten Chunks, die die HMR-Runtime lädt und anwendet. In Vite liefert der Dev-Server native ES-Module, sodass der Browser nur das bearbeitete Modul neu importiert.

HMR muss wissen, wo ein Update enden darf. Ein Modul, das seine eigenen Updates verarbeitet, ist eine HMR-Grenze. Akzeptiert das geänderte Modul das Update nicht, wandert es zu den importierenden Modulen nach oben. Erreicht es den Einstiegspunkt ohne Annahme, scheitert das Update und der Dev-Server lädt die Seite komplett neu. Frameworks richten das für Sie ein (React Fast Refresh, Vue Single-File-Components), von Hand schreiben Sie es selten.

Beispiel: ein Vite-Modul, das Updates akzeptiert

// counter.js
let timer = setInterval(tick, 1000)

if (import.meta.hot) {
  import.meta.hot.accept()
  import.meta.hot.dispose(() => clearInterval(timer))
}

Ohne den dispose-Handler würde jedes Speichern ein weiteres Intervall zusätzlich zum alten starten. Vite dokumentiert diese API auf vite.dev; mit if (import.meta.hot) lässt sie sich aus Produktions-Builds per Tree-Shaking entfernen.

HMR, Live Reload und vollständiges Neuladen

• Vollständiges Neuladen: Die Seite wird verworfen und alle Skripte laufen neu, der Zustand ist weg.
• Live Reload: lädt den Tab bei jedem Speichern automatisch neu, ist aber weiterhin ein vollständiges Neuladen.
• HMR: ersetzt nur die geänderten Module, der Zustand bleibt meist erhalten, und eine CSS-Änderung braucht gar kein Neuladen.

Häufige Fehler

• Kein Aufräumen. Timer, Listener und Subscriptions, die beim Import starten, häufen sich bei jedem Update an, wenn kein Dispose-Handler sie entfernt.
• Zustand auf Modulebene. Werte im Modul-Scope können beim Update zurückgesetzt werden, das Verhalten weicht dann vom frischen Laden ab.
• Unerwartete Neuladevorgänge ignorieren. Meist hat kein Modul darüber das Update akzeptiert.
• Dev-Zeiten glauben. Eine App mit aktivem HMR ist nicht die App, die Ihre Nutzer bekommen.

HMR, Testen und Monitoring

HMR verkürzt nur den Entwicklungszyklus. Über das Verhalten des Produktions-Builds sagt es nichts, denn die HMR-Runtime gehört nicht dazu. Prüfen Sie das echte Bundle in einem produktionsnahen Build: Largest Contentful Paint und die übrigen Core Web Vitals einer Single-Page-App hängen davon ab, was Sie ausliefern, nicht davon, wie schnell Sie iterieren. Unser Leitfaden zur JavaScript-Performance zeigt, was zu messen ist, und das Page-Speed-Monitoring verfolgt es nach dem Livegang regelmäßig.

Häufige Fragen zu Hot Module Replacement

Ist HMR dasselbe wie Live Reload?

Nein. Live Reload lädt die ganze Seite neu und verliert den Zustand. HMR ersetzt nur die geänderten Module in der laufenden Seite und behält meist den Zustand. Ist eine Änderung nicht sicher anwendbar, fällt es auf ein vollständiges Neuladen zurück.

Läuft HMR in Produktion?

Nein. Es gehört zum Dev-Server. Produktions-Builds enthalten die HMR-Runtime nicht, und die Vite-API ist so gebaut, dass sie sich daraus entfernen lässt.

Warum lädt meine App trotz HMR komplett neu?

Das geänderte Modul und alle Module darüber haben das Update nicht akzeptiert, es erreichte den Einstiegspunkt. Prüfen Sie Seiteneffekte beim Import oder eine nicht unterstützte Änderung der Exporte.

Welche Tools unterstützen HMR?

webpack und Vite unterstützen es beide, Frameworks ergänzen eigene Schichten wie React Fast Refresh und Vue-HMR für Single-File-Components. Die meisten Starter-Vorlagen aktivieren es standardmäßig.

Erhält HMR den Komponentenzustand?

Oft, aber nur nach bestem Bemühen. Änderungen an Zustand auf Modulebene oder an der Form einer Komponente können ihn zurücksetzen oder ein vollständiges Neuladen auslösen.