Hot Module Replacement es Fácil

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Aprende cómo funciona Vite's Hot Module Replacement (HMR) bajo el capó y todos los conceptos clave que lo impulsan.

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

Bjorn Lu
Bjorn Lu
11 min
16 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Bienvenido a JS Nation. Homework replacement, también conocido como HTML, permite actualizaciones de código sin recargar la página. Comprender HTML implica APIs, reacciones del servidor a ediciones de archivos y manejo de cambios del lado del cliente. El ciclo de vida de la API de HTML incluye adjuntar callbacks, desechar estados innecesarios y aceptar nuevos módulos. El manejo de cambios de archivos por parte del servidor, encontrar módulos relacionados y las decisiones de propagación de HTML determinan la ejecución del módulo y la recarga de la página. Los escenarios de propagación dictan actualizaciones de HTML dentro de los límites o recargas completas. La comunicación cliente-servidor a través de WebSocket gestiona recargas o actualizaciones de módulos.
Available in English: Hot Module Replacement is Easy

1. Homework Replacement Overview

Short description:

Bienvenido a JS Nation. El reemplazo de tareas, también conocido como HTML, permite actualizaciones de código sin actualizar la página. Herramientas como Vite, Parcel, Webpack lo tienen incorporado. Entender HTML implica APIs, reacciones del servidor a ediciones de archivos y manejo de cambios del lado del cliente.

Hola. Bienvenido a JS Nation. Soy Bjorn. Quiero hablar sobre el reemplazo de tareas hoy. Entonces, el reemplazo de tareas es un gran tema. Espero que esta charla lo haga más fácil de entender para ti y más digerible.

Así que vamos a entrar directamente en ello. ¿Qué es el reemplazo de tareas? El reemplazo de tareas también se conoce como HTML. Te permite actualizar tu código sin tener que actualizar tu página. Así que cuando actualizas tus componentes o ajustas tus estilos, puedes ver inmediatamente los cambios en tu navegador. Te permite iterar mucho, mucho más rápido que tener que esperar a que termine el paquete.

Así que si has usado herramientas como Vite, Parcel, Webpack, por ejemplo, en este lado derecho aquí, este logo de Vite, y también en mi camiseta aquí, este logo de Vite, es donde soy parte del equipo. Así que tienen el reemplazo de tareas incorporado. Así que si los has usado, probablemente ya has experimentado algo como esto en la práctica. Así que vamos a pasar a cómo realmente funciona dentro de ellos. Así que hay diferentes maneras de entender HTML. Es un sistema bastante grande.

Así que hay como tres cosas que podemos mirar desde el punto de vista. Hay APIs de HTML, donde implementas cómo se realiza realmente el reemplazo de módulos. Está el flujo desde el servidor. Así que cuando editas el archivo, cómo reacciona el servidor a ello. También está el flujo desde el cliente. Así que el navegador intentará manejar los cambios desde el servidor. Así que estas tres cosas vamos a cubrir a continuación. Así que las APIs de HTML, puedes pensarlas como hooks. Así que en el ciclo de vida de HTML, a veces tendrías que aceptar cambios cuando llega un nuevo módulo. Así que este hook dice que puedes aceptar cambios. Puedes hacer el reemplazo.

2. HTML API Lifecycle Details

Short description:

Adjuntarías un callback para los cambios necesarios. Elimina estados innecesarios, poda módulos eliminados e invalida cambios inesperados. El ciclo de vida implica eliminar, aceptar para reemplazo, actualizar y podar módulos. Acepta nuevos módulos, maneja cambios importados y muta estados usando hooks.

Así que adjuntarías un callback para que hagas los cambios necesarios allí. Hay una eliminación si necesitas deshacerte de estados innecesarios. Por ejemplo, tienes un estado que ya no se usa antes de las actualizaciones, lo haces allí. Hay una poda si tienes un módulo que se ha eliminado. Por ejemplo, si eliminas una importación y no la necesitas, puedes eliminar el estado completamente. Y también hay invalidar. Esto es menos un hook, pero más como una acción. Pero lo tocaremos más adelante, donde si tienes cambios que de repente no van como se esperaba, puedes llamar a esto para reiniciar el bucle HTML nuevamente. Así que puedes mirar el gráfico en el lado derecho, puedes ver que cuando tienes un archivo, puedes configurar los callbacks de HTML aquí. Así que puedes usar los hooks por aquí con estas APIs. Y luego, cada vez que actualices el archivo, llamas a eliminar, y luego llamas a aceptar para hacer el reemplazo, y luego actualizamos nuevamente y realizamos lo mismo otra vez. Y luego eliminamos el archivo, eliminas, y finalmente llamas a podar. Así que este es más o menos el ciclo de vida para cada módulo.

Así que aceptar, puedes tener dos firmas, si estás usando práctica, puedes aceptar el módulo actual. Así que un nuevo módulo llega, lo aceptas y el reemplazo. También puedes aceptar cambios de los módulos importados. Tal vez esto es lo que te importa, puedes hacer los cambios allí. Y luego mutas cualquier estado que desees. Y este hook usualmente solo maneja un vplugin, así que si instalas un react-vue-svelte-vplugin, esto es básicamente lo que están haciendo bajo el hook. Es un poco más aislado porque los componentes están más aislados en los componentes de Vue-Svelte. Así que los cambios son más idiomáticos de lo que se muestra aquí, pero aproximadamente están usando este hook para hacer los cambios que necesitan. Y esta es la parte más importante de la API de HTML para pensar en aceptar. También hay eliminar y podar.

Así que aquí hay un ejemplo. Puedes usar eliminar para restablecer un estado global si no lo estás usando. También puedes eliminar el estado si el módulo no se usa en absoluto. Así que estas son algunas formas en que también puedes usar los callbacks de hook y también hay invalidar. Así que en este ejemplo aquí, intentas aceptar el callback, pero algo extraño no está funcionando. Así que vas a abandonar, y luego invalidar. Así que este es solo un caso de uso, puedes usar invalidar para.

3. Server File Changes and HTML Propagation

Short description:

El servidor maneja cambios de archivos, encuentra módulos relacionados y actualiza recursivamente. La propagación de HTML decide la ejecución del módulo y la recarga de la página. Las actualizaciones de HTML ocurren dentro de los componentes y crean límites de HTML artificiales.

Así que vamos a entrar directamente en cómo el servidor realmente maneja los cambios cuando editas el archivo. Así que también podemos echar un vistazo al gráfico en el lado derecho. Cuando editas un archivo, hay FileSystemWatcherDetectChanges, y luego hay RenulChanges. Y luego el siguiente paso es averiguar el módulo shader a un archivo. Como se menciona aquí, hay componentes de React, Vue, Svelte. Algunos de ellos tienen una porción de código JS, y luego tienen la versión CSS del código, como los componentes de Vue o Svelte. Así que múltiples módulos podrían estar relacionados con un archivo. Así que trato de encontrar los módulos justo en este paso. Y luego, una vez que tienes los módulos, los pasamos al hook HandleHotUpdate. Así que este es un hook del plugin Vite. Específicamente, pueden cambiar el array, pueden agregar más módulos, pueden eliminar más módulos dependiendo de las circunstancias. Y luego, después de eso, invalidamos el módulo recursivamente. Así que si el módulo en sí necesita ser actualizado, necesitamos decirle al padre que importe la nueva versión de nosotros mismos. Y para hacer eso, tenemos que invalidar al padre para que el código que importa al hijo se actualice. Y luego el padre, el padre tiene que hacer lo mismo otra vez para que se invalide recursivamente. Así es como sucede en este paso. Así que eliminas la caché para que la próxima vez que lo importe, hagas la retransmisión de nuevo. Y luego tenemos la propagación de HTML. Así que esta es la parte principal de HTML, que es probablemente la parte más mágica y la parte más compleja que tocaremos en la siguiente diapositiva más adelante. Así que la propagación de HTML, decidimos si qué módulos aceptados se encuentran. Así que estos módulos ejecutarán los hooks de HTML que has implementado anteriormente, o decidirá si tienes que recargar la página si hay algo inesperado sucediendo. No hay cambios que puedan ser aceptados. Y luego, por último, una vez que descubres eso, retransmitimos el tipo de HTML para hacer el manejo.

Así que vamos a entrar directamente en la propagación de HTML. Así que echemos un vistazo rápido al gráfico de la derecha. Puedes ver una aplicación muy simple donde tienes un HTML aquí mismo, importa en código JS, importa un componente después de JSX cuando piensas en ello como un componente de React o algo más. Acepta HTML.

4. Propagation Scenarios and Module Updates

Short description:

Concepto de escenarios de propagación: actualizaciones que requieren aceptación de HTML o recarga completa. Actualización dentro de límites o recurriendo a recarga completa según la aceptación. Escenarios complejos determinan actualizaciones de módulos o necesidad de recarga completa. Los proveedores deciden la ejecución del módulo o los requisitos de recarga de página completa.

Este es más un concepto que puedes intentar pensar al averiguar cómo funciona la propagación, pero no es realmente algo que se esté aplicando en las herramientas. Pero vamos a entrar directamente en algunos escenarios de cómo funciona la propagación. Así que digamos que un estilo o JS se actualiza. Así que tenemos que este se actualiza porque cuando se actualiza, no acepta HTML. Necesita buscar al padre para ver si alguien podría aceptar HTML. Así que obviamente, cuando subes justo aquí, puedes ver que FJSX, acepta HTML. Así que comenzamos justo aquí. Encontramos los módulos que pueden aceptar HTML. Así que los hooks que hemos agregado para este módulo, se ejecutan, y luego obtenemos los nuevos módulos cuando se actualiza. Así que este es un escenario. Otro escenario es cuando tienes main.js actualizado. Así que este, como puedes ver, está fuera del límite. Y cuando subimos, no hay módulos que puedan aceptar HTML. Así que recuerda que HTML solo puede suceder cuando se llama a la API import manner.hot.accept. Así que estos módulos no lo tienen por defecto. Así que cuando llega a la raíz, no hay nada más que aceptar, simplemente recurre a una recarga completa. Así que en este caso, hacemos una recarga completa para el escenario dos. Y luego otro escenario es qué pasa si tenemos la actualización del componente directamente. En este caso, podemos averiguar que ya acepta HTML por sí mismo. Así que en este caso, es un escenario muy similar al uno, está dentro del límite en este caso. Así que se actualiza dentro de sí mismo. Así que este se actualiza, el resto de los módulos en la parte superior se actualizarán en este caso. Y luego otro escenario, digamos este caso, que es un poco complejo, tienes dos padres aquí, uno va al archivo JSX y otro va al archivo JS. Así que en este caso, podrías pensar que este aceptaría cambios. Pero también tenemos que tener en cuenta el otro archivo JS que ni siquiera acepta cambios. Y luego, cuando sube aquí, a la raíz, no hay forma de que se adapte al nuevo código del archivo utils. Así que la forma más segura que podríamos asumir es hacer una recarga completa. Así que aunque hay uno que podría aceptar cambios, si hay al menos uno más que no puede aceptar cambios, tenemos que hacer una recarga completa. Así que estos son solo algunos casos donde Vite u otros proveedores intentan averiguar qué módulos necesitan ser ejecutados de sus hooks de la API de HTML o si se necesita una recarga completa de la página. Vamos también a pasar directamente al cliente.

5. Client Interaction and Server Communication

Short description:

Pasar información de recarga o actualización a través de la conexión WebSocket. Manejo de recarga completa o actualizaciones de módulos según las instrucciones del servidor. Interacción del cliente con el servidor a través de WebSocket para actualizaciones o recargas.

Así que imagina si ya tenemos la información de si deberíamos hacer una recarga completa, o deberíamos hacer las actualizaciones, podemos pasarlo a través de una conexión WebSocket desde el servidor el cliente recibirá un mensaje justo aquí. Recibe una carga útil, podemos analizarla. Y el servidor podría decirnos que hagamos una recarga completa. En este caso, hacemos una ubicación de recarga para recargar la página. O podría devolver algunos módulos que necesitamos actualizar. Y luego simplemente averiguamos qué módulos tenemos que actualizar y llamamos a sus APIs de HTML para ello. Y para hacer eso, el cliente también configura las APIs de HTML.

Así que si miras el código aquí, básicamente esto es lo que inyecta bajo el capó para que realmente no lo veas. Pero no es realmente mágico. Inyecta algo de código que muta import meta.hot para que puedas llamar a import meta.hot para aceptar algo como esto. Así es como configura la API. Y luego también hay otra forma de comunicarse con el servidor. Así que si tienes código que no podría aceptar, llamas a invalidate. Como mencionaron anteriormente, si necesita ser invalidado, simplemente le dices al servidor que necesita invalidar en esta ruta específica.

Para que haga la propagación de HTML nuevamente, para ver si alguien más hace el módulo en su lugar, o en el peor de los casos, necesitamos hacer una recarga completa. Así que estas son las formas en que el cliente puede interactuar con el servidor. Así que un resumen de lo que se ha hablado hasta ahora, sabemos que las APIs de HTML se pueden usar con esperanza para el ciclo de vida de de-HTML. También podemos saber que el servidor observa el sistema de archivos. Activa la invalidación, la propagación, e informa al cliente de qué módulos necesitan actualizarse, o si necesita una recarga completa de la página. Y el cliente de HTML configura las APIs de HTML para su uso, y también para recibir instrucciones del servidor, si necesitamos hacer las actualizaciones o recargas, y luego ejecuta los hooks en consecuencia.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vite: Repensando las Herramientas de Frontend
JSNation Live 2021JSNation Live 2021
31 min
Vite: Repensando las Herramientas de Frontend
Top Content
Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Vite y el Futuro de las Herramientas de JavaScript
JSNation 2025JSNation 2025
23 min
Vite y el Futuro de las Herramientas de JavaScript
Top Content
Evan Yeo discusses Vite's growth, challenges with dependencies like ES Build and Rollup, and the creation of the bundler Rolldown. The JavaScript ecosystem faces fragmentation, but the company aims for a unified JavaScript stack. Rust is chosen for lower-level development, while JavaScript and TypeScript for high-level APIs. Roldown offers advanced bundling features, outperforming existing tools. Integration with Vite leads to tailored optimizations and significant speed improvements. Vite+ development focuses on creating a comprehensive toolkit. VitePlus integrates TS-down for library bundling, ViteTest for testing, and OX-Lint for linting. Future plans include monorepo awareness, build orchestration, and framework-like features.
10 Años de OSS Independiente: Una Retrospectiva
JSNation 2024JSNation 2024
33 min
10 Años de OSS Independiente: Una Retrospectiva
This talk is a ten-year retrospective into the growth of the Vue.js framework as an open-source project. It highlights the challenges faced by open-source developers, the importance of finding balance and managing scope, and the collaborative nature of the Vue community. The talk also discusses the development of Vite as a build tool and the vision for a unified JavaScript toolchain. It emphasizes the need for community alignment, contributions, and testing, while acknowledging the challenges of bad actors in the open-source community.
Qué hay de nuevo en Vite 6
JSNation US 2024JSNation US 2024
29 min
Qué hay de nuevo en Vite 6
Vite, a popular build tool for front-end development, has seen significant growth since its public release in 2021. It has been downloaded 12 million times and has over 1,000 contributors. Vite offers benefits such as a powerful dev server, hot module reloading, and a plugin API based on Rollup. However, there are limitations with server-side rendering that require extra code and handling of SSR flags. Vite's environment API allows for cleaner communication between the browser and server, and plugins can configure and customize specific environments. The future plans for Vite include stabilizing the environment API and integrating Rolldown Vite for faster builds. Vite is compatible with various front-end frameworks and is used by projects like Vaku and Vinci. The environment API has potential for per-local builds and building on older versions of Node, but may not be recommended for internationalization purposes.
El funcionamiento interno de la construcción de Vite
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
El funcionamiento interno de la construcción de Vite
Welcome to vidBuild, a tool that optimizes your application for production by offering fast hodgemodule replacement and support for various technologies. The build process in vidBuild involves optimizing and minifying assets, bundling JS and CSS, and generating chunks for dynamic imports. The pipeline in vidBuild includes plugins for alias, resolution, CSS modules, and asset handling. Vid is a complete build tool with a flexible plugin system and support from a vibrant community. Vite's plugin API is compatible with Rollup, and Vite aims for simplicity while pushing complexity to the plugin system.