O Que É Hot Module Replacement? Edições ao Vivo Sem Recarregar
O hot module replacement (HMR) atualiza os módulos que você acabou de editar dentro de um app de dev em execução, sem um reload completo da página e sem perder o estado do app.
Quando você salva um arquivo durante o desenvolvimento, um reload completo da página descarta seu estado atual e é lento. O HMR, em vez disso, troca apenas o módulo alterado no app em execução e re-renderiza a parte afetada. Ele torna o loop de editar-salvar-ver quase instantâneo. O HMR é estritamente um recurso de desenvolvimento, então não aparece em builds de produção do CI.
Como o HMR funciona
O dev server observa seus arquivos e mantém um websocket aberto com o navegador. Quando um módulo muda, ele envia apenas aquele módulo, e um runtime na página substitui a versão antiga e re-executa as partes que dependem dele.
Preservando o estado
Como a página nunca recarrega, o estado em memória, como a entrada de um formulário ou o estado de um componente, pode sobreviver a uma edição. Os frameworks adicionam integrações de HMR para que um componente atualize no lugar em vez de remontar do zero.
Onde ele se encaixa
- Ativo apenas durante o desenvolvimento local com um dev server.
- Conduzido por um websocket entre o dev server e o navegador.
- Totalmente desabilitado em builds de produção.
Limites e fallbacks
Algumas mudanças não podem ser trocadas a quente com segurança, como edições em efeitos colaterais no nível do módulo. Quando um módulo não é atualizável a quente, a ferramenta recorre a um reload completo para permanecer correta.
HMR e CI/CD
O HMR nunca roda em um pipeline, já que o CI produz saída estática otimizada, não uma sessão de dev ao vivo. A preocupação relevante do CI é manter os builds de dev e de CI consistentes: o mesmo bundler produz o dev server com HMR localmente e o artifact minificado no CI, para que o comportamento permaneça alinhado.
Principais conclusões
- O HMR troca módulos alterados em um app de dev em execução sem um reload completo.
- Ele pode preservar o estado do app entre edições, acelerando o loop de dev.
- O HMR é só de desenvolvimento e nunca faz parte de um build de produção do CI.