Öncelikle Sıcak Modül Değiştirme (HMR) 'nin hala deneysel bir özellik olduğunu belirtmek isterim.
HMR, çalışan bir uygulamada modül alışverişi yapma (ve modül ekleme / çıkarma) yöntemidir. Temel olarak, değiştirilen modülleri tam sayfa yeniden yüklemeden güncelleyebilirsiniz.
belgeleme
Ön Gereksinimler:
HMR için çok fazla değil, ama bağlantılar:
Bu cevapları belgelere ekleyeceğim.
O nasıl çalışır?
Uygulama görünümünden
Uygulama kodu, HMR çalışma zamanından güncellemeleri kontrol etmesini ister. HMR çalışma zamanı güncellemeleri (zaman uyumsuz) indirir ve uygulama koduna bir güncellemenin kullanılabilir olduğunu bildirir. Uygulama kodu, HMR çalışma zamanından güncellemeleri uygulamasını ister. HMR çalışma zamanı güncellemeleri (senkronizasyon) uygular. Uygulama kodu, bu süreçte kullanıcı etkileşimi gerektirebilir veya gerektirmeyebilir (siz karar verirsiniz).
Derleyici (webpack) görünümünden
Normal varlıklara ek olarak, derleyicinin önceki bir sürümden bu sürüme güncellenmesine izin vermek için "Güncelleme" yayınlaması gerekir. "Güncelleme" iki bölümden oluşur:
- güncelleme bildirimi (json)
- bir veya daha fazla güncelleme parçası (js)
Manifest yeni derleme karmasını ve tüm güncelleme parçalarının bir listesini (2) içerir.
Güncelleme yığınları, bu yığındaki tüm güncellenmiş modüllerin kodunu (veya bir modül çıkarılmışsa bir bayrağı) içerir.
Derleyici ayrıca modül ve yığın kimliklerinin bu derlemeler arasında tutarlı olmasını sağlar. Bir "kayıt" json dosyası kullanır yapıları arasında saklamak için (veya bunları bellekte saklar).
Modül görünümünden
HMR, tercih edilen bir özelliktir, bu nedenle yalnızca HMR kodu içeren modülleri etkiler. Belgelerde modüllerde bulunan API açıklanmaktadır. Genel olarak, modül geliştiricisi, bu modülün bağımlılığı güncellendiğinde çağrılan işleyicileri yazar. Bu modül güncellendiğinde çağrılan bir işleyici de yazabilirler.
Çoğu durumda, her modüle HMR kodu yazmak zorunlu değildir. Bir modülde HMR işleyici yoksa, güncelleme patlar. Bu, tek bir işleyicinin tam bir modül ağacı için güncelleştirmeleri işleyebileceği anlamına gelir. Bu ağaçtaki tek bir modül güncellenirse, modül ağacının tamamı yeniden yüklenir (yalnızca yeniden yüklenir, aktarılmaz).
HMR çalışma zamanı görünümünden (teknik)
Modülü izlemek için modül sistemi çalışma zamanı için ek kod parentsve children.
Yönetim tarafında, çalışma zamanı iki yöntemi destekler: checkve apply.
A check, güncelleme bildirimine bir HTTP isteği yapar. Bu istek başarısız olduğunda, kullanılabilir güncelleme yoktur. Bununla birlikte, güncellenen parçalar listesi, şu anda yüklü olan parçalar listesiyle karşılaştırılır. Yüklenen her yığın için, karşılık gelen güncelleme yığını indirilir. Tüm modül güncellemeleri çalışma zamanında güncelleme olarak saklanır. Çalışma zamanı duruma geçer ready, yani bir güncelleme indirilmiştir ve uygulamaya hazırdır.
Hazır durumundaki her yeni yığın isteği için, güncelleme yığını da indirilir.
applyYöntem bayrakları tüm geçersiz olarak modüller güncellendi. Her geçersiz modül için, modülde bir güncelleme işleyicisi veya her bir üst öğede güncelleme işleyicileri olması gerekir. Geçersiz balonları kaldırın ve tüm ebeveynleri de geçersiz olarak işaretleyin. Bu işlem artık "kabarma" meydana gelmeyene kadar devam eder. Bir giriş noktasına kadar kabarırsa, işlem başarısız olur.
Artık tüm geçersiz modüller atıldı (işleyiciyi atın) ve boşaltıldı. Ardından mevcut karma güncellenir ve tüm "kabul et" işleyicileri çağrılır. Çalışma zamanı idleduruma geri döner ve her şey normal şekilde devam eder.
Bununla ne yapabilirim?
Geliştirme sırasında bir LiveReload değiştirme olarak kullanabilirsiniz. Aslında webpack-dev-server, tüm sayfayı yeniden yüklemeye çalışmadan önce HMR ile güncelleme yapmaya çalışan bir sıcak modu destekler. Yalnızca webpack/hot/dev-servergiriş noktasını eklemeniz ve dev sunucusunu ile çağırmanız gerekir --hot.
Üretimde güncelleme mekanizmaları olarak da kullanabilirsiniz. Burada HMR'yi uygulamanızla entegre eden kendi yönetim kodunuzu yazmanız gerekir.
Bazı yükleyiciler zaten güncellenebilir modüller üretir. Örneğin style-loader, stil sayfasını değiştirebilir. Özel bir şey yapmanıza gerek yok.
Sayfayı yeniden yüklemeden ve LiveReload gibi eklentileri kullanmadan diske kaydettiğimde CSS (bir stil sayfası) ve JS modüllerimi güncellemek istediğimi varsayalım. Sıcak Modül Değiştirme bana yardımcı olabilecek bir şey mi?
Evet
Ne tür bir iş yapmam gerekiyor ve HMR zaten ne sağlıyor?
İşte küçük bir örnek: https://webpack.js.org/guides/hot-module-replacement/
Bir modül ancak "kabul ederseniz" güncellenebilir. Bu nedenle module.hot.accept, ebeveynlerde veya ebeveynlerin ebeveynlerinde modüle ihtiyacınız var ... örneğin bir Yönlendirici iyi bir yer veya bir alt görünümdür.
Yalnızca webpack-dev-server ile kullanmak istiyorsanız, webpack/hot/dev-servergiriş noktası olarak ekleyin . Else checkve çağıran bazı HMR yönetim kodu gerekir apply.
Görüş: Bu kadar havalı yapan nedir?
- LiveReload, ancak her modül türü için.
- Üretimde kullanabilirsiniz.
- Güncellemeler, Kod Bölme işleminize uyar ve yalnızca uygulamanızın kullanılmış bölümleri için güncellemeleri indirin.
- Uygulamanızın bir kısmı için kullanabilirsiniz ve diğer modülleri etkilemez
- HMR devre dışı bırakılmışsa, tüm HMR kodu derleyici tarafından kaldırılır (içine sarın
if(module.hot)).
Uyarılar
- Deneysel ve çok iyi test edilmedi.
- Bazı hatalar bekliyoruz.
- Teorik olarak üretimde kullanılabilir, ancak ciddi bir şey için kullanmak için çok erken olabilir.
- Modül kimliklerinin derlemeler arasında izlenmesi gerekir, böylece bunları saklamanız gerekir (
records).
- Optimize edici, ilk derlemeden sonra modül kimliklerini daha fazla optimize edemez. Paket boyutu üzerinde biraz etki.
- HMR çalışma zamanı kodu paket boyutunu artırır.
- Üretim kullanımı için, HMR işleyicilerini test etmek için ek testler gereklidir. Bu oldukça zor olabilir.
