Kaip veikia karštas perkrovimas (hot reload) Vue CLI pavyzdyje?

Vue CLI naudoja webpack-dev-server, kuris apima Hot Module Replacement (HMR).

HMR veikimo procesas Vue atrodo taip:

1. Vystymo serverio paleidimas: Paleidus npm run serve, webpack-dev-server paleidžia serverį ir pradeda stebėti projekto failus.
2. Failo pakeitimas: Kai kūrėjas išsaugo pakeitimus faile (.vue, .js, .css ir kt.).
3. Pakeitimų aptikimas: webpack-dev-server aptinka pakeitimo faktą.
4. Modulio perkompiliavimas: Webpack perkompiliuoja pakeistą modulį (pvz., Vue komponentą).
5. Atnaujinimo siuntimas: Webpack-dev-server siunčia atnaujinimų paketą (hotswap update) naršyklei per WebSocket.
6. Atnaujinimo taikymas: HMR kliento dalis (kodas, įkeltas į projektą) gauna paketą ir bando jį pritaikyti. Vue komponentams tai reiškia seno komponento apibrėžimo pakeitimą nauju, išlaikant esamą būseną (pvz., duomenis data()).
7. DOM atnaujinimas: Vue reaktiškai atnaujina DOM naudodamas naują šabloną ar komponento logiką, neperkraudamas visos puslapio.

Pavyzdinė atnaujinimo paketo struktūra:

{
  "hash": "...", // Kompiliacijos hash
  "c": { // Atlikti atnaujinimai
    "src/components/HelloWorld.vue": true // Modulis, kurį reikia atnaujinti
  }
}

HMR kliento kodas gauna šį paketą ir paleidžia atnaujinimo logiką src/components/HelloWorld.vue.

// Pavyzdinis pseudo-kodo fragmentas HMR kliento kode
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Vue komponento atnaujinimo logika, išlaikanti būseną
    // Paprastai tai atlieka vue-loader kartu su webpack-dev-server
  });
}

Taip, kai keičiasi komponentas, tik tas komponentas atnaujinamas atmintyje naršyklėje, o ne visas puslapis, kas žymiai pagreitina kūrimo procesą.