প্রথমে আমি লক্ষ করতে চাই যে হট মডিউল রিপ্লেসমেন্ট (এইচএমআর) এখনও পরীক্ষামূলক বৈশিষ্ট্য।
এইচএমআর একটি চলমান অ্যাপ্লিকেশন (এবং মডিউল যুক্ত / অপসারণ) মধ্যে মডিউল বিনিময় করার একটি উপায়। আপনি মূলত কোনও পূর্ণ পৃষ্ঠা পুনরায় লোড ছাড়াই পরিবর্তিত মডিউলগুলি আপডেট করতে পারেন।
নথিপত্র
পূর্বশর্ত:
এটি এইচএমআরের পক্ষে তেমন কিছু নয়, তবে এখানে লিঙ্কগুলি রয়েছে:
আমি এই উত্তরগুলি ডকুমেন্টেশনে যুক্ত করব।
এটা কিভাবে কাজ করে?
অ্যাপের ভিউ থেকে
অ্যাপ্লিকেশন কোডটি এইচএমআর রানটাইমকে আপডেটগুলি চেক করতে বলে। এইচএমআর রানটাইম আপডেটগুলি (অ্যাসিঙ্ক) ডাউনলোড করে এবং অ্যাপ্লিকেশন কোডকে বলে যে একটি আপডেট উপলব্ধ। অ্যাপ্লিকেশন কোডটি এইচএমআর রানটাইমকে আপডেটগুলি প্রয়োগ করতে বলে। এইচএমআর রানটাইম আপডেটগুলি (সিঙ্ক) প্রয়োগ করে। অ্যাপ্লিকেশন কোডটির এই প্রক্রিয়াতে ব্যবহারকারীর ইন্টারঅ্যাকশন প্রয়োজন হতে পারে বা নাও লাগতে পারে (আপনি সিদ্ধান্ত নিয়েছেন)।
সংকলক (ওয়েবপ্যাক) ভিউ থেকে
সাধারণ সম্পদ ছাড়াও, এই সংস্করণে পূর্ববর্তী সংস্করণ থেকে আপডেট করার অনুমতি দেওয়ার জন্য সংকলকটিকে "আপডেট" প্রেরণ করা প্রয়োজন। "আপডেট" এর দুটি অংশ রয়েছে:
- আপডেট ম্যানিফেস্ট (জেসন)
- এক বা একাধিক আপডেট অংশ (জেএস)
ম্যানিফেস্টে নতুন সংকলন হ্যাশ এবং সমস্ত আপডেট খণ্ডের একটি তালিকা রয়েছে (2)।
আপডেট অংশগুলিতে এই অংশের সমস্ত আপডেট হওয়া মডিউলগুলির কোড রয়েছে (বা একটি মডিউল সরানো থাকলে একটি পতাকা)।
সংকলক অতিরিক্তভাবে নিশ্চিত করে যে মডিউল এবং খণ্ড আইডিগুলি এই বিল্ডগুলির মধ্যে সামঞ্জস্যপূর্ণ। এটি বিল্ডগুলির মধ্যে সংরক্ষণের জন্য একটি "রেকর্ডস" জেসন ফাইল ব্যবহার করে (বা এটি তাদের স্মৃতিতে সঞ্চয় করে)।
মডিউল ভিউ থেকে
এইচএমআর একটি অপ্ট-ইন বৈশিষ্ট্য, সুতরাং এটি কেবলমাত্র এইচএমআর কোডযুক্ত মডিউলগুলিকেই প্রভাবিত করে। ডকুমেন্টেশনগুলি মডিউলগুলিতে উপলব্ধ এমন এপিআই বর্ণনা করে। সাধারণভাবে, মডিউল বিকাশকারী হ্যান্ডলারগুলি লিখেন যা এই মডিউলের একটি নির্ভরতা আপডেট করা হলে ডাকা হয়। এই মডিউলটি আপডেট হওয়ার পরে তারা একটি হ্যান্ডলারও লিখতে পারে।
বেশিরভাগ ক্ষেত্রে, প্রতিটি মডিউলে এইচএমআর কোড লেখা বাধ্যতামূলক নয়। যদি কোনও মডিউলে কোনও এইচএমআর হ্যান্ডলার না থাকে তবে আপডেট বুদবুদ হয়। এর অর্থ একটি একক হ্যান্ডলার সম্পূর্ণ মডিউল গাছের আপডেট আপডেট করতে পারে। যদি এই গাছের একটি একক মডিউল আপডেট করা হয় তবে সম্পূর্ণ মডিউল ট্রিটি পুনরায় লোড করা হয় (কেবল পুনরায় লোড করা হয়, স্থানান্তর করা হয়নি)।
এইচএমআর রানটাইম ভিউ থেকে (প্রযুক্তিগত)
মডিউল সিস্টেম রানটাইমের জন্য মডিউল parentsএবং ট্র্যাক করার জন্য অতিরিক্ত কোড নির্গত হয় children।
পরিচালনার পক্ষে, রানটাইম দুটি পদ্ধতি সমর্থন করে: checkএবং apply।
এ checkআপডেট ম্যানিফেস্টে একটি HTTP অনুরোধ করে। যখন এই অনুরোধটি ব্যর্থ হয়, কোনও আপডেট উপলব্ধ নেই। অন্যভাবে আপডেট হওয়া অংশগুলির তালিকাটি বর্তমানে লোড হওয়া খণ্ডগুলির তালিকার সাথে তুলনা করা হয়। প্রতিটি লোড অংশের জন্য, সম্পর্কিত আপডেট অংশ ডাউনলোড হয় is সমস্ত মডিউল আপডেট আপডেট হিসাবে রানটাইমে সংরক্ষণ করা হয়। রানটাইম readyরাজ্যে স্যুইচ করে , যার অর্থ একটি আপডেট ডাউনলোড হয়েছে এবং এটি প্রয়োগের জন্য প্রস্তুত।
প্রস্তুত অবস্থায় প্রতিটি নতুন অংশের জন্য অনুরোধের জন্য আপডেট অংশটিও ডাউনলোড করা হয়।
applyপদ্ধতি পতাকা সব অবৈধ হিসাবে মডিউল আপডেট করা হয়েছে। প্রতিটি অবৈধ মডিউলের জন্য মডিউলে আপডেট হ্যান্ডলার বা প্রতিটি পিতামাতার আপডেট হ্যান্ডলার হওয়া দরকার। অন্যথায় অবৈধ বুদবুদ আপ এবং সমস্ত পিতামাতাকেও অবৈধ হিসাবে চিহ্নিত করে। আর কোনও "বুদ্বুদ আপ" না হওয়া পর্যন্ত এই প্রক্রিয়াটি অব্যাহত থাকে। এটি কোনও এন্ট্রি পয়েন্ট পর্যন্ত বুদবুদ হলে, প্রক্রিয়া ব্যর্থ হয়।
এখন সমস্ত অবৈধ মডিউল নিষ্পত্তি (হ্যান্ডলার নিষ্পত্তি) এবং আনলোড করা হয়। তারপরে বর্তমান হ্যাশ আপডেট হয়ে গেছে এবং সমস্ত "গ্রহনযোগ্য" হ্যান্ডলারের কল করা হয়। রানটাইম আবার idleরাজ্যে ফিরে যায় এবং সবকিছু স্বাভাবিক হিসাবে চলতে থাকে।
আমি এটি দিয়ে কি করতে পারি?
আপনি এটি লাইভরেলোড প্রতিস্থাপন হিসাবে বিকাশে ব্যবহার করতে পারেন। আসলে ওয়েবপ্যাক-ডেভ-সার্ভার একটি হট মোড সমর্থন করে যা পুরো পৃষ্ঠাটি পুনরায় লোড করার চেষ্টা করার আগে এইচএমআর দিয়ে আপডেট করার চেষ্টা করে। আপনাকে কেবল webpack/hot/dev-serverএন্ট্রি পয়েন্ট যুক্ত করতে হবে এবং এর সাথে ডেভ-সার্ভারটি কল করতে হবে --hot।
আপনি এটি আপডেট পদ্ধতি হিসাবে উত্পাদনতে ব্যবহার করতে পারেন। এখানে আপনাকে নিজের ব্যবস্থাপনার কোড লিখতে হবে যা আপনার অ্যাপের সাথে এইচএমআরকে সংহত করে।
কিছু লোডার ইতোমধ্যে গরম-আপডেটযোগ্য মডিউলগুলি তৈরি করে। উদাহরণস্বরূপ style-loaderস্টাইলশিট বিনিময় করতে পারে। আপনার বিশেষ কিছু করার দরকার নেই।
ধরুন আমি পৃষ্ঠাটি পুনরায় লোড না করে এবং লাইভরেলোডের মতো প্লাগইন ব্যবহার না করেই যখন আমার সিএসএস (একটি স্টাইলশিট) এবং জেএস মডিউলগুলি ডিস্কে সংরক্ষণ করি তখন আপডেট করতে চাই। এটি কি হট মডিউল প্রতিস্থাপনটি আমাকে সহায়তা করতে পারে?
হ্যাঁ
আমার কোন ধরণের কাজ করা দরকার এবং এইচএমআর ইতিমধ্যে কী সরবরাহ করে?
এখানে একটি সামান্য উদাহরণ: https://webpack.js.org/guides/hot-module-replacement/
কোনও মডিউল কেবলমাত্র যদি আপনি এটি "গ্রহণ" করেন তবে আপডেট করা যায়। সুতরাং আপনার module.hot.acceptপিতামাতার বা পিতামাতার মডিউলে আপনার প্রয়োজন ... উদাহরণস্বরূপ একটি রাউটার একটি ভাল জায়গা বা একটি মতামত।
আপনি যদি কেবল ওয়েবপ্যাক-ডেভ-সার্ভার দিয়ে এটি ব্যবহার করতে চান তবে কেবল webpack/hot/dev-serverএন্ট্রি পয়েন্ট হিসাবে যুক্ত করুন । অন্যথায় আপনার কিছু এইচএমআর পরিচালনা কোড দরকার যা কল করে checkএবং apply।
মতামত: কী এত সুন্দর করে তোলে?
- এটি LiveReload কিন্তু প্রতিটি মডিউল ধরণের জন্য।
- আপনি উত্পাদন এটি ব্যবহার করতে পারেন।
- আপডেটগুলি আপনার কোড বিভাজনকে সম্মান করে এবং আপনার অ্যাপ্লিকেশনটির ব্যবহৃত অংশগুলির জন্য আপডেটগুলি ডাউনলোড করে।
- আপনি আপনার অ্যাপ্লিকেশনটির একটি অংশের জন্য এটি ব্যবহার করতে পারেন এবং এটি অন্যান্য মডিউলগুলিকে প্রভাবিত করে না
- যদি এইচএমআর অক্ষম থাকে, সমস্ত এইচএমআর কোডটি কম্পাইলার দ্বারা সরানো হয় (এতে মোড়ানো
if(module.hot))।
আদেশ সহকারে
- এটি পরীক্ষামূলক এবং এত ভাল পরীক্ষিত নয়।
- কিছু বাগ আশা করি।
- তাত্ত্বিকভাবে উত্পাদনে ব্যবহারযোগ্য, তবে গুরুতর কিছুতে এটি ব্যবহার করা খুব তাড়াতাড়ি হতে পারে।
- সংকলনের মধ্যে মডিউল আইডিগুলি ট্র্যাক করা দরকার যাতে আপনার সেগুলি সংরক্ষণ করা দরকার (
records)।
- অপ্টিমাইজার প্রথম সংকলনের পরে আর কোনও মডিউল আইডি অনুকূল করতে পারে না। বান্ডিল আকারে কিছুটা প্রভাব।
- এইচএমআর রানটাইম কোড বান্ডেলের আকার বাড়ায়।
- উত্পাদন ব্যবহারের জন্য, এইচএমআর হ্যান্ডলারগুলি পরীক্ষা করার জন্য অতিরিক্ত পরীক্ষার প্রয়োজন। এটি বেশ কঠিন হতে পারে।
