पहले मैं यह नोट करना चाहता हूं कि हॉट मॉड्यूल रिप्लेसमेंट (HMR) अभी भी एक प्रायोगिक विशेषता है।
HMR एक रनिंग एप्लिकेशन में मॉड्यूल का आदान-प्रदान करने (और मॉड्यूल को जोड़ने / हटाने) का एक तरीका है। आप मूल रूप से एक पूर्ण पृष्ठ पुनः लोड किए बिना बदले हुए मॉड्यूल को अपडेट कर सकते हैं।
प्रलेखन
पूर्व आवश्यकताएं:
यह HMR के लिए इतना नहीं है, लेकिन यहाँ लिंक हैं:
मैं इन उत्तरों को प्रलेखन में जोड़ दूँगा।
यह कैसे काम करता है?
ऐप व्यू से
ऐप कोड अपडेट के लिए एचएमआर रनटाइम की जांच करने के लिए कहता है। HMR रनटाइम अपडेट (async) को डाउनलोड करता है और ऐप कोड को बताता है कि अपडेट उपलब्ध है। ऐप कोड अपडेट को लागू करने के लिए HMR रनटाइम पूछता है। HMR रनटाइम अपडेट (सिंक) को लागू करता है। इस प्रक्रिया में ऐप कोड को उपयोगकर्ता सहभागिता की आवश्यकता हो सकती है या नहीं (आप तय करें)।
संकलक (वेबपैक) दृश्य से
सामान्य संपत्तियों के अलावा, कंपाइलर को "अपडेट" से बाहर निकलने की जरूरत है, ताकि इस वर्जन के पिछले वर्जन से अपडेट किया जा सके। "अपडेट" में दो भाग हैं:
- अद्यतन प्रकट (json)
- एक या एकाधिक अपडेट विखंडू (js)
मैनिफ़ेस्ट में नया संकलन हैश और सभी अद्यतन विखंडू (2) की सूची शामिल है।
अपडेट चंक्स में इस चंक में सभी अपडेट किए गए मॉड्यूल (या यदि कोई मॉड्यूल हटा दिया गया था तो एक ध्वज) कोड होता है।
कंपाइलर अतिरिक्त रूप से सुनिश्चित करता है कि मॉड्यूल और चंक आईडी इन बिल्ड के बीच संगत हैं। यह उन्हें बिल्ड (या यह मेमोरी में स्टोर करता है) के बीच स्टोर करने के लिए एक "रिकॉर्ड" json फ़ाइल का उपयोग करता है।
मॉड्यूल दृश्य से
HMR एक ऑप्ट-इन फीचर है, इसलिए यह केवल उन मॉड्यूल को प्रभावित करता है जिनमें HMR कोड होता है। प्रलेखन एपीआई का वर्णन करता है जो मॉड्यूल में उपलब्ध है। सामान्य तौर पर, मॉड्यूल डेवलपर हैंडलर लिखता है जिसे इस मॉड्यूल की निर्भरता अपडेट होने पर कहा जाता है। वे एक हैंडलर भी लिख सकते हैं जिसे इस मॉड्यूल के अपडेट होने पर कहा जाता है।
ज्यादातर मामलों में, प्रत्येक मॉड्यूल में HMR कोड लिखना अनिवार्य नहीं है। यदि किसी मॉड्यूल में कोई HMR हैंडलर नहीं है, तो अपडेट बंद हो जाता है। इसका मतलब है कि एक एकल हैंडलर एक पूर्ण मॉड्यूल ट्री के लिए अपडेट संभाल सकता है। यदि इस पेड़ में एक भी मॉड्यूल अपडेट किया गया है, तो पूरा मॉड्यूल पेड़ फिर से लोड किया जाता है (केवल पुनः लोड किया जाता है, स्थानांतरित नहीं किया जाता है)।
HMR रनटाइम व्यू (तकनीकी) से
मॉड्यूल को ट्रैक करने के लिए मॉड्यूल सिस्टम रनटाइम के लिए अतिरिक्त कोड उत्सर्जित होता है parentsऔर children।
प्रबंधन की ओर, रनटाइम दो विधियों का समर्थन करता है: checkऔर apply।
A checkअपडेट के प्रकटन के लिए HTTP अनुरोध करता है। जब यह अनुरोध विफल हो जाता है, तो कोई अद्यतन उपलब्ध नहीं है। अपडेट किए गए विखंडू की सूची की तुलना वर्तमान में लोड किए गए विखंडू की सूची से की जाती है। प्रत्येक लोड किए गए chunk के लिए, संबंधित अपडेट chunk डाउनलोड किया गया है। सभी मॉड्यूल अपडेट को अपडेट के रूप में रनटाइम में संग्रहीत किया जाता है। रनटाइम readyस्थिति में बदल जाता है, जिसका अर्थ है कि एक अपडेट डाउनलोड किया गया है और इसे लागू करने के लिए तैयार है।
तैयार राज्य में प्रत्येक नए चंक अनुरोध के लिए, अपडेट चंक भी डाउनलोड किया गया है।
applyविधि झंडे सभी अमान्य के रूप में मॉड्यूल अपडेट किया गया। प्रत्येक अमान्य मॉड्यूल के लिए, मॉड्यूल में अपडेट हैंडलर होना आवश्यक है या हर माता-पिता में अपडेट हैंडलर होना चाहिए। अमान्य बुलबुले को हटा दें और सभी माता-पिता को भी अमान्य मान लें। यह प्रक्रिया तब तक जारी रहती है जब तक कि "बबल अप" नहीं होता। यदि यह एक प्रवेश बिंदु तक बढ़ता है, तो प्रक्रिया विफल हो जाती है।
अब सभी अमान्य मॉड्यूल निपटाए जाते हैं (हैंडलर निपटाने) और अनलोड किए जाते हैं। फिर वर्तमान हैश को अपडेट किया जाता है और सभी "स्वीकार" हैंडलर कहलाते हैं। रनटाइम idleस्थिति में वापस आ जाता है और सब कुछ सामान्य रूप से जारी रहता है।
हम इसके साथ क्या कर सकते हैं?
आप इसे LiveReload प्रतिस्थापन के रूप में विकास में उपयोग कर सकते हैं। वास्तव में वेबपैक-देव-सर्वर एक गर्म मोड का समर्थन करता है जो एचएमआर के साथ अपडेट करने की कोशिश करता है ताकि पूरे पृष्ठ को फिर से लोड करने की कोशिश की जा सके। आपको केवल webpack/hot/dev-serverप्रविष्टि बिंदु जोड़ने और देव-सर्वर को कॉल करने की आवश्यकता है --hot।
आप इसे अद्यतन तंत्र के रूप में उत्पादन में भी उपयोग कर सकते हैं। यहां आपको अपना प्रबंधन कोड लिखना होगा जो आपके ऐप के साथ HMR को एकीकृत करता है।
कुछ लोडर पहले से ही मॉड्यूल उत्पन्न करते हैं जो हॉट-अपडाउटेबल हैं। उदा। style-loaderस्टाइलशीट का आदान-प्रदान कर सकते हैं। आपको कुछ विशेष करने की आवश्यकता नहीं है।
मान लीजिए कि मैं अपने सीएसएस (एक स्टाइलशीट) और जेएस मॉड्यूल को अपडेट करना चाहता हूं, जब मैं उन्हें डिस्क पर सहेजता हूं, पृष्ठ को फिर से लोड किए बिना और लाइवरेलैड जैसे प्लगइन्स का उपयोग किए बिना। क्या यह कुछ हॉट मॉड्यूल रिप्लेसमेंट मेरी मदद कर सकता है?
हाँ
मुझे किस तरह के काम करने की ज़रूरत है, और एचएमआर पहले से क्या प्रदान करता है?
यहाँ एक छोटा सा उदाहरण है: https://webpack.js.org/guides/hot-module-replacement/
एक मॉड्यूल को केवल तभी अपडेट किया जा सकता है यदि आप इसे "स्वीकार" करते हैं। इसलिए आपको module.hot.acceptमाता-पिता या माता-पिता के माता-पिता में मॉड्यूल की आवश्यकता है ... उदाहरण के लिए एक राउटर एक अच्छी जगह है, या एक सबव्यू है।
यदि आप केवल वेबपैक-देव-सर्वर के साथ इसका उपयोग करना चाहते हैं, तो webpack/hot/dev-serverप्रवेश बिंदु के रूप में जोड़ें । वरना आप कुछ HMR प्रबंधन कोड है कि कॉल की जरूरत है checkऔर apply।
राय: क्या यह इतना अच्छा बनाता है?
- यह LiveReload है, लेकिन हर मॉड्यूल प्रकार के लिए।
- आप इसे उत्पादन में उपयोग कर सकते हैं।
- अपडेट आपके कोड विभाजन का सम्मान करते हैं और केवल आपके ऐप के उपयोग किए गए भागों के लिए अपडेट डाउनलोड करते हैं।
- आप इसे अपने एप्लिकेशन के एक भाग के लिए उपयोग कर सकते हैं और यह अन्य मॉड्यूल को प्रभावित नहीं करता है
- यदि HMR अक्षम है, तो सभी HMR कोड कंपाइलर (इसे लपेटें
if(module.hot)) द्वारा हटा दिए जाते हैं ।
चेतावनियां
- यह प्रयोगात्मक है और इतनी अच्छी तरह से परीक्षण नहीं किया गया है।
- कुछ कीड़े की अपेक्षा करें।
- उत्पादन में सैद्धांतिक रूप से प्रयोग करने योग्य है, लेकिन किसी गंभीर चीज के लिए इसका इस्तेमाल करना जल्दबाजी होगी।
- मॉड्यूल आईडी को संकलनों के बीच ट्रैक करने की आवश्यकता है ताकि आपको उन्हें (
records) स्टोर करने की आवश्यकता हो ।
- ऑप्टिमाइज़र पहले संकलन के बाद किसी भी अधिक मॉड्यूल आईडी का अनुकूलन नहीं कर सकता है। बंडल आकार पर थोड़ा प्रभाव।
- HMR रनटाइम कोड बंडल आकार को बढ़ाता है।
- उत्पादन के उपयोग के लिए, एचएमआर हैंडलर का परीक्षण करने के लिए अतिरिक्त परीक्षण की आवश्यकता होती है। यह काफी मुश्किल हो सकता है।
