Vue CLI örneğiyle sıcak yeniden yükleme (hot reload)…

Vue CLI, hot module replacement (HMR) içeren webpack-dev-server kullanır.

Vue için HMR'nin çalışma süreci şu şekildedir:

Geliştirme sunucusunu başlatma: npm run serve komutu çalıştırıldığında, webpack-dev-server sunucuyu başlatır ve proje dosyalarını izlemeye başlar.
Dosya değişikliği: Geliştirici bir dosyada (.vue, .js, .css vb.) değişiklik kaydettiğinde.
Değişikliklerin tespiti: webpack-dev-server değişikliği algılar.
Modül yeniden derleme: Webpack, değiştirilen modülü yeniden derler (örneğin, bir Vue bileşeni).
Güncellemenin gönderilmesi: webpack-dev-server, güncelleme paketini (hotswap update) WebSocket üzerinden tarayıcıya gönderir.
Güncellemenin uygulanması: HMR'nin istemci tarafı (derleme koduna gömülü), paketi alır ve uygulamaya çalışır. Vue bileşenleri için bu, eski bileşen tanımını yenisiyle değiştirirken, bileşenin mevcut durumu (örneğin, data() içeriği) korunur.
DOM güncellemesi: Vue, yeni şablon veya bileşen mantığını kullanarak DOM'u reaktif şekilde günceller, sayfayı yeniden yüklemeden.

Güncelleme paketinin yapısına örnek:

{
  "hash": "...", // Derleme hash'i
  "c": { // Güncellenen derleme parçaları
    "src/components/HelloWorld.vue": true // Güncellenmesi gereken modül
  }
}

HMR istemci kodu bu paketi alır ve src/components/HelloWorld.vue için güncelleme mantığını çalıştırır.

// HMR istemci kodu içinde örnek pseudokod
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Vue bileşenini güncelleme mantığı, durumu koruyarak
    // Normalde bu, vue-loader ve webpack-dev-server tarafından yönetilir
  });
}

Bu şekilde, bileşende yapılan değişiklikler sadece bu bileşeni bellekte günceller, sayfanın tamamını değil, bu da geliştirmeyi önemli ölçüde hızlandırır.

Vue CLI örneğiyle sıcak yeniden yükleme (hot reload) nasıl çalışır?