¿Cómo funciona la recarga en caliente (hot reload) en el ejemplo de Vue CLI?

Vue CLI utiliza webpack-dev-server, que incluye Hot Module Replacement (HMR).

El proceso de trabajo de HMR para Vue es el siguiente:

1. Iniciar el servidor de desarrollo: Al ejecutar npm run serve, webpack-dev-server levanta el servidor y comienza a monitorear los archivos del proyecto.
2. Cambios en el archivo: Cuando el desarrollador guarda cambios en un archivo (.vue, .js, .css, etc.).
3. Detección de cambios: webpack-dev-server detecta el cambio.
4. Reconstrucción del módulo: Webpack recompila el módulo modificado (por ejemplo, un componente Vue).
5. Envío de la actualización: webpack-dev-server envía el paquete de actualizaciones (hotswap update) al navegador vía WebSocket.
6. Aplicación de la actualización: La parte cliente de HMR (integrada en el código de compilación), al recibir el paquete, intenta aplicarlo. Para los componentes Vue, esto significa reemplazar la definición antigua del componente por la nueva, manteniendo el estado actual de las instancias del componente (por ejemplo, los datos en data()).
7. Actualización del DOM: Vue actualiza reactivamente el DOM usando la nueva plantilla o lógica del componente, sin recargar toda la página.

Ejemplo de estructura del paquete de actualizaciones:

{
  "hash": "...", // Hash de la compilación
  "c": { // Partes de la compilación actualizadas
    "src/components/HelloWorld.vue": true // Módulo que necesita ser actualizado
  }
}

El código cliente de HMR recibe este paquete y ejecuta la lógica de actualización para src/components/HelloWorld.vue.

// Ejemplo de pseudocódigo dentro del código cliente de HMR
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Lógica para actualizar el componente Vue, manteniendo el estado
    // Normalmente, esto lo maneja vue-loader junto con webpack-dev-server
  });
}

De esta forma, al modificar un componente, solo ese componente en memoria del navegador se actualiza, no toda la página, lo que acelera significativamente el desarrollo.