Πώς λειτουργεί η ζεστή επαναφόρτωση (hot reload) στο…

Το Vue CLI χρησιμοποιεί το webpack-dev-server, το οποίο περιλαμβάνει το Hot Module Replacement (HMR).

Η διαδικασία λειτουργίας του HMR για το Vue έχει ως εξής:

Εκκίνηση του διακομιστή ανάπτυξης: Όταν εκτελείται το npm run serve, το webpack-dev-server ξεκινάει τον διακομιστή και αρχίζει να παρακολουθεί τα αρχεία του έργου.
Αλλαγή αρχείου: Όταν ο προγραμματιστής αποθηκεύει αλλαγές σε ένα αρχείο (.vue, .js, .css, κ.λπ.).
Ανίχνευση αλλαγών: το webpack-dev-server ανιχνεύει την αλλαγή.
Επανακατασκευή του module: το Webpack ξαναχτίζει το τροποποιημένο module (π.χ., ένα Vue component).
Αποστολή της ενημέρωσης: το webpack-dev-server στέλνει το πακέτο ενημερώσεων (hotswap update) στον browser μέσω WebSocket.
Εφαρμογή της ενημέρωσης: το μέρος πελάτη του HMR (ενσωματωμένο στον κώδικα κατασκευής), λαμβάνει το πακέτο και προσπαθεί να το εφαρμόσει. Για τα Vue components, αυτό σημαίνει αντικατάσταση του παλιού ορισμού του component με το νέο, διατηρώντας την τρέχουσα κατάσταση των instances του component (π.χ., δεδομένα στο data()).
Ενημέρωση του DOM: το Vue ενημερώνει reaktivally το DOM χρησιμοποιώντας το νέο πρότυπο ή λογική του component, χωρίς να φορτώνει ξανά ολόκληρη τη σελίδα.

Παράδειγμα δομής του πακέτου ενημέρωσης:

{
  "hash": "...", // Hash κατασκευής
  "c": { // Τμήματα κατασκευής που ενημερώθηκαν
    "src/components/HelloWorld.vue": true // Module που πρέπει να ενημερωθεί
  }
}

Ο κώδικας πελάτη HMR λαμβάνει αυτό το πακέτο και εκτελεί τη λογική ενημέρωσης για το src/components/HelloWorld.vue.

// Παράδειγμα ψευδοκώδικα μέσα στον κώδικα πελάτη HMR
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Λογική ενημέρωσης του Vue component, διατηρώντας την κατάσταση
    // Συνήθως, αυτό διαχειρίζεται από το vue-loader σε συνεργασία με το webpack-dev-server
  });
}

Έτσι, όταν αλλάζει ένα component, μόνο αυτό το component στη μνήμη του browser ενημερώνεται, όχι ολόκληρη η σελίδα, κάτι που επιταχύνει σημαντικά την ανάπτυξη.

Πώς λειτουργεί η ζεστή επαναφόρτωση (hot reload) στο παράδειγμα του Vue CLI;