როგორ მუშაობს ცხელი გადატვირთვა (hot reload) Vue CLI-ის მაგალითზე?

Vue CLI იყენებს webpack-dev-server-ს, რომელიც მოიცავს Hot Module Replacement-ს (HMR).

HMR-ის მუშაობის პროცესი Vue-სთვის ასე გამოიყურება:

1. დეველოპერული სერვერის დაწყება: როდესაც იშვიათად npm run serve იშვიათად, webpack-dev-server ამართავს სერვერს და იწყებს პროექტის ფაილების მონიტორინგს.
2. ფაილის ცვლილება: როდესაც დეველოპერი ინახავს ცვლილებებს ფაილში (.vue, .js, .css და ა.შ.).
3. ცვლილებების გამოვლენა: webpack-dev-server აღმოაჩენს ცვლილების ფაქტს.
4. მოდულის გადამუშავება: Webpack გადამუშავებს ცვლილებულ მოდულს (მაგალითად, Vue კომპონენტს).
5. განახლების გაგზავნა: Webpack-dev-server აგზავნის განახლებათა პაკეტს (hotswap update) ბრაუზერს WebSocket-ის მეშვეობით.
6. განახლების გამოყენება: HMR-ის კლიენტური ნაწილი (შენახული კოდის შიგნით) იღებს პაკეტს და ცდილობს მისი გამოყენებას. Vue კომპონენტებისთვის ეს ნიშნავს ძველი კომპონენტის განსაზღვრების შეცვლას ახალით, ამავდროულად შენარჩუნებული არსებული მდგომარეობა (მაგალითად, მონაცემები data()-ში).
7. DOM-ის განახლება: Vue რეაქტიულად განაახლებს DOM-ს ახალი შაბლონით ან კომპონენტის ლოგიკით, მთელი გვერდის გადატვირთვის გარეშე.

განახლების პაკეტის სტრუქტურის მაგალითი:

{
  "hash": "...", // ბილდის ჰეში
  "c": { // განახლებული ბილდის ნაწილები
    "src/components/HelloWorld.vue": true // მოდული, რომელიც უნდა განახლდეს
  }
}

HMR-ის კლიენტური კოდი იღებს ამ პაკეტს და იწყებს განახლების ლოგიკას src/components/HelloWorld.vue-ისთვის.

// ჰმ-ის კლიენტური კოდის პსევდოკოდის მაგალითი
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Vue კომპონენტის განახლების ლოგიკა, რომელიც ინარჩუნებს მდგომარეობას
    // ჩვეულებრივ, ამას ახორციელებს vue-loader და webpack-dev-server ერთად
  });
}

ამგვარად, კომპონენტის ცვლილებისას, მხოლოდ ეს კომპონენტი განახლდება მეხსიერებაში ბრაუზერში, მთელი გვერდი არა, რაც მნიშვნელოვნად აჩქარებს განვითარების პროცესს.