Hot Reload: ہاٹ ریلوڈ اور یہ ڈیولپمنٹ کو کیسے تیز کرتا ہے

Hot Reload کیا ہے؟

Hot Reload ایک ڈیولپمنٹ میکانزم ہے جس میں سورس فائلوں میں تبدیلیاں ایپلیکیشن کو دوبارہ شروع کیے بغیر چلتی ہوئی ایپلیکیشن میں فوری طور پر ظاہر ہوتی ہیں۔ ڈیولپر ایڈیٹر میں کوڈ میں ترمیم کرتا ہے، فائل محفوظ کرتا ہے، اور نتیجہ فوری طور پر براؤزر یا ایمولیٹر میں نظر آتا ہے۔

اس ٹیکنالوجی کی کلیدی خصوصیت ایپلیکیشن کی حالت کو محفوظ رکھنا ہے۔ میموری میں متغیرات، فارمز میں ڈیٹا، موجودہ نیویگیشن — سب کچھ اپنی جگہ پر رہتا ہے۔ ڈیولپر کو مطلوبہ اسکرین پر واپس جانے کے لیے اعمال کی ترتیب دہرانے کی ضرورت نہیں ہے۔

ویب ڈیولپمنٹ میں، Hot Reload Hot Module Replacement (HMR) میکانزم کے ذریعے لاگو کیا جاتا ہے۔ بنڈلر فائل کی تبدیلیوں کی نگرانی کرتا ہے، متاثرہ ماڈیولز کا تعین کرتا ہے، اور WebSocket کے ذریعے براؤزر کو اپ ڈیٹ شدہ کوڈ بھیجتا ہے۔ براؤزر صفحہ دوبارہ لوڈ کیے بغیر صرف ان ماڈیولز کو بدلتا ہے۔

Hot Reload کی مقبولیت سنگل پیج ایپلیکیشنز (SPA) کے پھیلاو کے ساتھ بڑھی، جہاں صفحہ کا مکمل ری لوڈ کلائنٹ ایپلیکیشن کی تمام حالت تباہ کر دیتا ہے۔ React، Vue، Angular اور دیگر فریم ورک HMR کو بنیادی ڈیولپمنٹ موڈ کے طور پر تجویز کرتے ہیں۔

بنڈلر کے اندر HMR کیسے کام کرتا ہے

HMR میکانزم چار مراحل پر مشتمل ہے۔ سرور سائیڈ پر بنڈلر تبدیل شدہ ماڈیول کو کمپائل کرتا ہے، کوڈ کے نئے ورژن کے ساتھ JSON پیچ بناتا ہے، اور اسے WebSocket کنکشن کے ذریعے براؤزر کو بھیجتا ہے۔ براؤزر سائیڈ HMR رن ٹائم پیچ وصول کرتا ہے، پرانے ماڈیول کو نئے سے بدلتا ہے، اور ماڈیول کے سبسکرائبرز کو مطلع کرتا ہے۔

کمپائیلیشن اور بھیجنے کا مرحلہ

Webpack Dev Server کلائنٹ کے ساتھ بات چیت کے لیے WebSocket استعمال کرتا ہے۔ جب کوئی فائل تبدیل ہوتی ہے، بنڈلر تبدیلیوں کے مینی فیسٹ کے ساتھ hot-update.js اور hot-update.json بناتا ہے۔ کلائنٹ JSONP کے ذریعے ان فائلوں کو خودکار طور پر لوڈ کرتا ہے۔

// webpack.config.js - HMR سیٹ اپ
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devServer: {
    hot: true,
    liveReload: false
  },
  plugins: [new HtmlWebpackPlugin()]
};

کلائنٹ پر ماڈیول کا اطلاق

براؤزر میں HMR رن ٹائم چیک کرتا ہے کہ تبدیل ہونے والا ماڈیول accept کو سپورٹ کرتا ہے یا نہیں۔ اگر ماڈیول نے module.hot.accept() کا اعلان کیا ہے، رن ٹائم اسے جگہ پر بدلتا ہے اور اپ ڈیٹ کال بیک چلاتا ہے۔ اگر accept کا اعلان نہیں کیا گیا، HMR پیرنٹ ماڈیول لیول پر واپس آجاتا ہے۔

React Fast Refresh میں، یہ منطق فریم ورک لیول پر شامل ہے — ہر فائل میں دستی طور پر module.hot.accept لکھنے کی ضرورت نہیں ہے۔ Babel پلگ ان react-refresh/babel ایسا کوڈ شامل کرتا ہے جو حالت کھوئے بغیر محفوظ طریقے سے اجزاء کو بدلتا ہے۔

Hot Reload، Live Reload اور Full Reload میں فرق

یہ تینوں اصطلاحات اکثر الجھ جاتی ہیں، لیکن یہ رویے میں یکسر مختلف ہیں۔ Live Reload کسی بھی تبدیلی پر پورے صفحہ کو دوبارہ لوڈ کرتا ہے — تمام حالت ختم ہو جاتی ہے۔ Full Reload اس وقت ہوتا ہے جب ڈیولپمنٹ سرور مکمل طور پر دوبارہ شروع ہوتا ہے، نہ صرف کلائنٹ بلکہ سرور کی حالت بھی ختم ہو جاتی ہے۔

Hot اور Live کے درمیان انتخاب براہ راست ڈیولپمنٹ کی رفتار کو متاثر کرتا ہے۔ HMR کے ساتھ، “کوڈ میں ترمیم → نتیجہ دیکھیں” سائیکل 50-200 ms لیتا ہے۔ Live Reload کے ساتھ — 1-3 سیکنڈ اور سیاق و سباق کی بحالی کا وقت۔ کام کے دن میں، فرق دسیوں منٹ کے بچت وقت کے برابر ہوتا ہے۔

React Fast Refresh: React کے لیے خصوصیات

React Fast Refresh React اجزاء کے لیے موزوں کردہ سرکاری Hot Reload نفاذ ہے۔ اس نے پرانے React Hot Loader میکانزم کو تبدیل کیا، جو غیر مستحکم تھا اور دستی کنفیگریشن کی ضرورت تھی۔ Fast Refresh react-refresh/babel کے ذریعے Create React App، Next.js، Vite اور Webpack میں شامل ہے۔

فنکشنل اجزاء کی حمایت

Fast Refresh فنکشنل اجزاء کی حالت کو صحیح طور پر محفوظ رکھتا ہے جب ان کا کوڈ تبدیل ہوتا ہے۔ اگر آپ صرف JSX مارک اپ تبدیل کرتے ہیں، useState اور دیگر ہکس اپنی قدروں کو برقرار رکھتے ہیں۔ اگر ہک کی منطق تبدیل ہوتی ہے، تو جزو دوبارہ ماؤنٹ ہوتا ہے۔

// مثال - JSX تبدیل ہونے پر حالت محفوظ
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

محفوظ تبدیلی کے قواعد

اگر نئے کوڈ میں کمپائیلیشن خرابی ہو تو Fast Refresh حالت کو محفوظ نہیں رکھتا۔ اگر جزو ڈیفالٹ طور پر ایکسپورٹ نہیں کیا گیا (named export)، تو حالت بھی محفوظ نہیں رہ سکتی۔ اجزاء کے لیے default export استعمال کرنے اور اگر حالت کے تحفظ کی ضمانت کی ضرورت ہو تو ایکسپورٹس کو memo میں لپیٹنے کی سفارش کی جاتی ہے۔

HMR سپورٹ والے بلڈ ٹولز

جدید بنڈلرز HMR فراہم کرتے ہیں۔ Webpack devServer.hot کے ذریعے لچکدار کنفیگریشن کے ساتھ HMR کا علمبردار ہے۔ Vite بنڈلنگ کے بغیر فوری HMR کے لیے مقامی ESM اور esbuild استعمال کرتا ہے۔ Parcel زیرو کنفیگ HMR پیش کرتا ہے۔ Turbopack Rust پر مبنی HMR کے ساتھ Vercel کا نیا بنڈلر ہے۔

Vite رفتار میں نمایاں ہے — Vite میں HMR براؤزر کے مقامی ES ماڈیولز کے ذریعے کام کرتا ہے۔ جب کوئی فائل تبدیل ہوتی ہے، Vite پورے پروجیکٹ کو دوبارہ کمپائل کیے بغیر صرف اس ماڈیول کو import() کے ذریعے بھیجتا ہے۔ Webpack ہر ماڈیول کو مکمل طور پر کمپائل کرتا ہے، جو بڑے پروجیکٹس میں HMR کو سست کر دیتا ہے۔

منصوبوں میں HMR کنفیگریشن کی مثالیں

مختلف بنڈلرز کے لیے HMR سیٹ اپ دیکھتے ہیں۔ Webpack میں devServer میں hot: true سیٹ کرنا اور react-refresh/babel شامل کرنا ضروری ہے۔ Vite میں HMR کسی بھی پری سیٹ کے ساتھ بلٹ ان کام کرتا ہے۔ Next.js میں Fast Refresh ٹربو کمپائلر کے ذریعے ڈیفالٹ طور پر فعال ہے۔

React کے ساتھ Vite

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    hmr: {
      port: 3001
    }
  }
});

Fast Refresh کے ساتھ Webpack 5

// webpack.config.js
const ReactRefreshWebpackPlugin =
  require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  mode: 'development',
  devServer: { hot: true },
  plugins: [new ReactRefreshWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.jsx?$/u,
        use: 'babel-loader'
      }
    ]
  }
};

ہاٹ ریلوڈ کی حدود اور مسائل

HMR تمام منظرناموں میں صحیح کام نہیں کرتا۔ CSS ماڈیولز متحرک کلاسز کے ساتھ لاگو نہیں ہو سکتے۔ عالمی متغیرات اور سنگلٹن (Redux اسٹور، روٹر) ری لوڈ پر ری سیٹ ہو سکتے ہیں۔ بھاری لائبریریاں HMR پر بعض اوقات GC کے بغیر ماڈیول تبدیلی کی وجہ سے میموری لیک پیدا کر سکتی ہیں۔

HMR مسائل کا حل ہاٹ کوڈ کو بغیر ضمنی اثرات کے خالص اجزاء میں الگ کرنا ہے۔ ضمنی اثرات (WebSocket سبسکرپشنز، ٹائمر) کو useEffect میں صاف کیا جانا چاہیے۔ Redux کے لیے، sessionStorage میں حالت محفوظ کرنے والا persister تجویز کیا جاتا ہے۔ CSS جیسے CSS Modules یا styled-components اضافی کنفیگریشن کے بغیر HMR کے ساتھ صحیح کام کرتے ہیں۔

ایک اور حد پروڈکشن میں ڈیبگنگ ہے: HMR جان بوجھ کر پروڈکشن بلڈز میں غیر فعال کیا جاتا ہے۔ سورس کوڈ منیفائیڈ ہوتا ہے اور پروڈکشن میں ہاٹ ریپلیسمنٹ ناممکن ہے۔ پروڈکشن میں خرابیوں کو ڈیبگ کرنے کے لیے، سورس میپس اور لاگنگ استعمال کریں، لیکن HMR نہیں۔