Hot Module Replacement (HMR): cómo funciona

¿Qué es Hot Module Replacement (HMR)?

Hot Module Replacement (HMR) reemplaza, añade o elimina módulos en una aplicación en ejecución sin recargar la página completa. Un servidor de desarrollo envía el módulo modificado al navegador, que ejecuta la nueva versión y, cuando puede, conserva el estado, como lo escrito en un formulario o la ruta actual. Es una herramienta de desarrollo, no una función de producción.

Cómo funciona HMR

El empaquetador o el servidor de desarrollo vigila los archivos y mantiene una conexión con la página, normalmente un WebSocket. Al guardar, solo recompila lo que cambió y envía una actualización. En webpack el compilador genera un manifiesto actualizado y los chunks modificados, que el runtime de HMR descarga y aplica. En Vite el servidor entrega módulos ES nativos, así que el navegador vuelve a importar solo el módulo editado.

HMR necesita saber hasta dónde puede llegar una actualización. Un módulo que gestiona sus propias actualizaciones es un límite de HMR. Si el módulo modificado no acepta la actualización, esta sube hacia los módulos que lo importan. Si llega al punto de entrada sin que nadie la acepte, la actualización falla y el servidor recarga la página completa. Los frameworks lo configuran por ti (React Fast Refresh, componentes de un solo archivo de Vue), así que rara vez se escribe a mano.

Ejemplo: un módulo de Vite que acepta actualizaciones

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

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

Sin el manejador dispose, cada guardado arrancaría otro intervalo encima del anterior. Vite documenta esta API en vite.dev; envolverla en if (import.meta.hot) permite eliminarla de las compilaciones de producción mediante tree-shaking.

HMR, live reload y recarga completa

• Recarga completa: se descarta la página y todos los scripts se ejecutan de nuevo, así que se pierde todo el estado.
• Live reload: recarga la pestaña automáticamente en cada guardado, pero sigue siendo una recarga completa.
• HMR: parchea solo los módulos modificados, el estado suele sobrevivir y un cambio de CSS no necesita recarga.

Errores comunes

• No limpiar. Los temporizadores, listeners y suscripciones iniciados al importar se acumulan en cada actualización si ningún manejador dispose los elimina.
• Depender del estado a nivel de módulo. Los valores en el ámbito del módulo pueden reiniciarse al actualizar, y el comportamiento difiere de una carga limpia.
• Ignorar las recargas completas inesperadas. Suelen indicar que ningún módulo superior acepta la actualización.
• Fiarse de los tiempos de desarrollo. Una app con HMR activo no es la app que reciben tus usuarios.

HMR, testing y monitorización

HMR solo acorta el ciclo de edición. No dice nada sobre el comportamiento de la compilación de producción, porque el runtime de HMR no forma parte de ella. Comprueba el bundle real en una compilación parecida a producción: el Largest Contentful Paint y el resto de Core Web Vitals de una aplicación de una sola página dependen de lo que publicas, no de lo rápido que iteras. Nuestra guía de rendimiento de JavaScript explica qué medir, y la monitorización de velocidad de página lo vigila de forma programada cuando el sitio ya está en producción.

Preguntas frecuentes sobre Hot Module Replacement

¿HMR es lo mismo que live reload?

No. Live reload recarga toda la página y pierde el estado. HMR reemplaza solo los módulos modificados en la página en ejecución y suele conservar el estado. Si no puede aplicar un cambio con seguridad, recurre a una recarga completa.

¿HMR se ejecuta en producción?

No. Pertenece al servidor de desarrollo. Las compilaciones de producción no incluyen el runtime de HMR, y la API de Vite está pensada para poder eliminarse de ellas.

¿Por qué mi app recarga por completo aunque HMR esté activo?

El módulo modificado y todos los que están por encima no aceptaron la actualización, y esta llegó al punto de entrada. Revisa los efectos secundarios al importar o un cambio no admitido en las exportaciones.

¿Qué herramientas admiten HMR?

webpack y Vite lo admiten, y los frameworks añaden capas propias, como React Fast Refresh y el HMR de los componentes de un solo archivo de Vue. La mayoría de plantillas iniciales lo activan por defecto.

¿HMR conserva el estado de los componentes?

A menudo sí, pero es un esfuerzo razonable, no una garantía. Cambiar el estado a nivel de módulo o la forma de un componente puede reiniciarlo o provocar una recarga completa.