Hot Reload: issiq qayta yuklash va u dasturlashni qanday tezlashtiradi

Hot Reload nima?

Hot Reload — bu manba fayllardagi o'zgarishlar ilovani qayta ishga tushirmasdan darhol ishlayotgan ilovada aks etadigan dasturlash mexanizmidir. Dasturchi muharrirda kodni tahrir qiladi, faylni saqlaydi va natija darhol brauzer yoki emulatorda ko'rinadi.

Texnologiyaning asosiy xususiyati ilova holatini saqlashdir. Xotiradagi o'zgaruvchilar, formadagi ma'lumotlar, joriy navigatsiya — hamma narsa o'z joyida qoladi. Dasturchi kerakli ekranga qaytish uchun harakatlar ketma-ketligini takrorlashi shart emas.

Veb-dasturlashda Hot Reload Hot Module Replacement (HMR) mexanizmi orqali amalga oshiriladi. Bandler fayl o'zgarishlarini kuzatadi, qaysi modullar ta'sirlanganini aniqlaydi va yangilangan kodni WebSocket orqali brauzerga yuboradi. Brauzer sahifani qayta yuklamasdan faqat o'sha modullarni almashtiradi.

Hot Reload-ning mashhurligi bir sahifali ilovalar (SPA) tarqalishi bilan oshdi, bunda sahifani to'liq qayta yuklash mijoz ilovasining butun holatini yo'q qiladi. React, Vue, Angular va boshqa freymvorklar HMRni asosiy dasturlash rejimi sifatida tavsiya qiladi.

HMR bandler ichida qanday ishlaydi

HMR mexanizmi to'rt bosqichdan iborat. Server tomonidagi bandler o'zgartirilgan modulni kompilyatsiya qiladi, kodning yangi versiyasi bilan JSON yamoq yaratadi va uni WebSocket ulanishi orqali brauzerga yuboradi. Brauzer qismidagi HMR runtime yamog'ini qabul qiladi, eski modulni yangisi bilan almashtiradi va modul obunachilariga xabar beradi.

Kompilyatsiya va jo'natish bosqichi

Webpack Dev Server mijoz bilan aloqa qilish uchun WebSocket-dan foydalanadi. Fayl o'zgartirilganda, bandler o'zgarishlar manifesti bilan hot-update.js va hot-update.json yaratadi. Mijoz bu fayllarni JSONP orqali avtomatik yuklaydi.

// webpack.config.js - HMR sozlamalari
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

Modulni mijoz tomonida qo'llash

Brauzerdagi HMR runtime almashtirilayotgan modul accept-ni qo'llab-quvvatlashini tekshiradi. Agar modul module.hot.accept() ni e'lon qilgan bo'lsa, runtime uni joyida almashtiradi va yangilash callback-ni ishga tushiradi. Agar accept e'lon qilinmagan bo'lsa, HMR yuqori darajaga, ota-modulga o'tadi.

React Fast Refresh da bu mantiq freymvork darajasida o'rnatilgan — har bir faylda qo'lda module.hot.accept yozish shart emas. Babel-plugin react-refresh/babel holatni yo'qotmasdan komponentlarni xavfsiz almashtiradigan kod qo'shadi.

Hot Reload, Live Reload va Full Reload o'rtasidagi farq

Bu uch atama ko'pincha aralashtiriladi, ammo ular xatti-harakati jihatidan tubdan farq qiladi. Live Reload har qanday o'zgarishda butun sahifani to'liq qayta yuklaydi — barcha holat yo'qoladi. Full Reload nafaqat mijoz holatini, balki server holatini ham yo'qotib, dasturlash serverini to'liq qayta ishga tushirish bilan sodir bo'ladi.

Hot va Live o'rtasidagi tanlov bevosita dasturlash tezligiga ta'sir qiladi. HMR da „kodni o'zgartirdim → natijani ko'rdim” sikli 50-200 ms davom etadi. Live Reload da — 1-3 soniya va kontekstni tiklash vaqti. Ish kuni davomida farq o'nlab daqiqa tejalgan vaqtni tashkil qiladi.

React Fast Refresh: React uchun xususiyatlar

React Fast Refresh — React komponentlari uchun optimallashtirilgan rasmiy Hot Reload amalga oshirilishi. U beqaror bo'lgan va qo'lda sozlashni talab qiladigan eski React Hot Loader mexanizmini almashtirdi. Fast Refresh react-refresh/babel orqali Create React App, Next.js, Vite va Webpack-ga o'rnatilgan.

Funksional komponentlarni qo'llab-quvvatlash

Fast Refresh kod o'zgartirilganda funksional komponentlarning holatini to'g'ri saqlaydi. Agar siz faqat JSX belgilashni o'zgartirsangiz — useState va boshqa hook-lar o'z qiymatlarini saqlaydi. Agar hook mantig'i o'zgarsa — komponentni qayta o'rnatish sodir bo'ladi.

// Misol - JSX o'zgarganda holat saqlanadi
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>
  );
}

Xavfsiz almashtirish qoidalari

Agar yangi kod kompilyatsiya xatosi ni o'z ichiga olsa, Fast Refresh holatni saqlamaydi. Agar komponent standart (default) o'rniga nomli (named export) eksport qilinsa, holat ham saqlanmasligi mumkin. Komponentlar uchun default export dan foydalanish va holatni saqlashni kafolatlash kerak bo'lsa, eksportlarni memo bilan o'rash tavsiya etiladi.

HMR qo'llab-quvvatlovchi qurish vositalari

Zamonaviy bandlerlar HMR ni ta'minlaydi. Webpack — devServer.hot orqali moslashuvchan konfiguratsiyaga ega HMR kashshofi. Vite bandlingsiz bir zumda HMR uchun mahalliy ESM va esbuild dan foydalanadi. Parcel — nol konfiguratsiyali HMR. Turbopack — Rust da HMR bilan Vercel dan yangi bandler.

Vite tezligi bilan ajralib turadi — Vite da HMR brauzerning mahalliy ES modullari orqali ishlaydi. Fayl o'zgartirilganda, Vite butun loyihani qayta kompilyatsiya qilmasdan faqat o'sha modulni import() orqali yuboradi. Webpack har bir modulni to'liq kompilyatsiya qiladi, bu katta loyihalarda HMR ni sekinlashtiradi.

Loyihalarda HMR konfiguratsiyasi misollari

Turli bandlerlar uchun HMR sozlamalarini ko'rib chiqamiz. Webpack da devServer da hot: true ni o'rnatish va react-refresh/babel qo'shish kerak. Vite da HMR har qanday preset bilan qutidan chiqadi. Next.js da Fast Refresh turbo kompilyator orqali sukut bo'yicha yoqilgan.

Vite bilan React

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

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

Webpack 5 bilan Fast Refresh

// 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'
      }
    ]
  }
};

Issiq qayta yuklashning cheklovlari va muammolari

HMR barcha stsenariylarda to'g'ri ishlamaydi. CSS modullari dinamik sinflar bilan qo'llanilmasligi mumkin. Global o'zgaruvchilar va singletonlar (Redux store, router) qayta yuklashda qayta o'rnatilishi mumkin. Og'ir kutubxonalar HMR da GCsiz modullarni almashtirish tufayli ba'zan xotira oqishlarini keltirib chiqaradi.

HMR muammolarini hal qilish — issiq kodni yon ta'sirlarsiz toza komponentlarda ajratish. Yon ta'sirlar (WebSocket obunalari, taymerlar) useEffect da tozalanishi kerak. Redux uchun sessionStorage da holatni saqlaydigan persister tavsiya etiladi. CSS Modules yoki styled-components kabi CSS yechimlari qo'shimcha sozlamalarsiz HMR bilan to'g'ri ishlaydi.

Yana bir cheklov — ishlab chiqarishda nosozliklarni tuzatish: HMR ishlab chiqarish qurilishida ataylab o'chiriladi. Manba kodi minimallashtirilgan va ishlab chiqarishda issiq almashtirish mumkin emas. Ishlab chiqarishdagi xatolarni tuzatish uchun source maps va loglash ishlatiladi, lekin HMR emas.