Como funciona a recarga rápida (hot reload) no exemplo do Vue CLI?

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

O processo de funcionamento do HMR para Vue é o seguinte:

1. Iniciar o servidor de desenvolvimento: Ao executar npm run serve, o webpack-dev-server inicia o servidor e começa a monitorizar os ficheiros do projeto.
2. Alteração do ficheiro: Quando o desenvolvedor guarda alterações num ficheiro (.vue, .js, .css, etc.).
3. Detecção de alterações: o webpack-dev-server detecta a alteração.
4. Reconstrução do módulo: o Webpack recompila o módulo alterado (por exemplo, um componente Vue).
5. Envio da atualização: o webpack-dev-server envia o pacote de atualizações (hotswap update) ao navegador via WebSocket.
6. Aplicação da atualização: a parte cliente do HMR (integrada no código de build), ao receber o pacote, tenta aplicá-lo. Para os componentes Vue, isso significa substituir a definição antiga do componente pela nova, mantendo o estado atual das instâncias do componente (por exemplo, os dados em data()).
7. Atualização do DOM: o Vue atualiza reativamente o DOM usando o novo template ou lógica do componente, sem recarregar toda a página.

Exemplo de estrutura do pacote de atualizações:

{
  "hash": "...", // Hash da build
  "c": { // Partes da build atualizadas
    "src/components/HelloWorld.vue": true // Módulo a atualizar
  }
}

O código cliente do HMR recebe este pacote e executa a lógica de atualização para src/components/HelloWorld.vue.

// Exemplo de pseudocódigo dentro do código cliente HMR
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Lógica de atualização do componente Vue, mantendo o estado
    // Normalmente, isso é gerido pelo vue-loader em conjunto com o webpack-dev-server
  });
}

Assim, ao modificar um componente, apenas esse componente na memória do navegador é atualizado, e não toda a página, o que acelera significativamente o desenvolvimento.