Hot Reload: qaynar yenidən yükləmə və tərtibatı necə sürətləndirir

Hot Reload nədir?

Hot Reload — mənbə fayllarındakı dəyişikliklərin tətbiqatı yenidən başlatmadan dərhal işləyən tətbiqatda əks olunduğu tərtibat mexanizmidir. Tərtibatçı redaktorda kodu redaktə edir, faylı yadda saxlayır və nəticə dərhal brauzerdə və ya emulyatorda görünür.

Texnologiyanın əsas xüsusiyyəti tətbiqatın vəziyyətinin qorunmasıdır. Yaddaşdakı dəyişənlər, formalardakı məlumatlar, cari naviqasiya — hər şey yerində qalır. Tərtibatçı lazımi ekrana qayıtmaq üçün hərəkətlər ardıcıllığını təkrarlamalı deyil.

Veb tərtibatda Hot Reload Hot Module Replacement (HMR) mexanizmi vasitəsilə həyata keçirilir. Paketləyici fayl dəyişikliklərini izləyir, hansı modulların təsirləndiyini müyən edir və yenilənmiş kodu WebSocket vasitəsilə brauzerə göndərir. Brauzer səhifəni yenidən yükləmədən yalnız bu modulları əvəz edir.

Hot Reload-un populyarlığı tək səhifəli tətbiqatların (SPA) yayılması ilə artdı, burada səhifənin tam yenidən yüklənməsi müştəri tətbiqatının bütün vəziyyətini məhv edir. React, Vue, Angular və digər freymvorklar HMR-i əsas tərtibat rejimi kimi tövsiyə edir.

HMR paketləyici daxilində necə işləyir

HMR mexanizmi dörd mərhələdən ibarətdir. Server tərəfində paketləyici dəyişdirilmiş modulu kompilyasiya edir, kodun yeni versiyası ilə JSON yaması yaradır və onu WebSocket əlaqəsi vasitəsilə brauzerə göndərir. Brauzer hissəsində HMR runtime yamanı qəbul edir, köhnə modulu yenisi ilə əvəz edir və modul abunəçilərinə məlumat verir.

Kompilyasiya və göndərmə mərhələsi

Webpack Dev Server müştəri ilə əlaqə üçün WebSocket-dən istifadə edir. Fayl dəyişdirildikdə, paketləyici dəyişiklik manifesti ilə hot-update.js və hot-update.json yaradır. Müştəri bu faylları JSONP vasitəsilə avtomatik yükləyir.

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

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

Modulun müştəri tərəfində tətbiqi

Brauzerdə HMR runtime əvəz edilən modulun accept-i dəstəkləyib-dəstəkləmədiyini yoxlayır. Modul module.hot.accept() elan edibsə, runtime onu yerində əvəz edir və yeniləmə callback-i işə salır. Accept elan edilməyibsə, HMR yuxarı səviyyəyə, ana modula keçir.

React Fast Refresh-də bu məntiq freymvork səviyyəsində qurulub — hər faylda əl ilə module.hot.accept yazmağa ehtiyac yoxdur. Babel-plugin react-refresh/babel vəziyyəti itirmədən komponentləri təhlükəsiz əvəz edən kod əlavə edir.

Hot Reload-un Live Reload və Full Reload-dan fərqi

Bu üç termin tez-tez qarışdırılır, lakin onlar davranış baxımından köklü şəkildə fərqlənir. Live Reload hər dəyişiklikdə bütün səhifəni tamamilə yenidən yükləyir — bütün vəziyyət itirilir. Full Reload yalnız müştəri vəziyyətini deyil, həm də server vəziyyətini itirərək tərtibat serverinin tam yenidən işə salınması ilə baş verir.

Hot və Live arasında seçim birbaşa tərtibat sürətinə təsir edir. HMR-də „kodu dəyişdim → nəticəni gördüm” dövri 50-200 ms çəkir. Live Reload-da — 1-3 saniyə üstəlik konteksti bərpa etmə vaxtı. İş günü ərzində fərq onlarla dəqiqə qənaət edilmiş vaxt təşkil edir.

React Fast Refresh: React üçün xüsusiyyətlər

React Fast Refresh — React komponentləri üçün optimallaşdırılmış rəsmi Hot Reload tətbiqidir. O, qeyri-sabit olan və əl ilə konfiqurasiya tələb edən köhnə React Hot Loader mexanizmini əvəz etdi. Fast Refresh react-refresh/babel vasitəsilə Create React App, Next.js, Vite və Webpack-ə daxil edilmişdir.

Funksional komponentlərin dəstəyi

Fast Refresh kod dəyişdirilərkən funksional komponentlərin vəziyyətini düzgün şəkildə qoruyur. Yalnız JSX işarələrini dəyişdirirsinizsə — useState və digər hook-lar öz dəyərlərini qoruyur. Hook-un məntiqi dəyişirsə — komponentin yenidən qoşulması baş verir.

// Nümunə - JSX dəyişdikdə vəziyyət qorunur
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>
  );
}

Təhlükəsiz əvəzetmə qaydaları

Yeni kodda kompilyasiya xətası varsa, Fast Refresh vəziyyəti qorumur. Komponent default əvəzinə adlı ixrac edilirsə (named export), vəziyyət də qorunmaya bilər. Komponentlər üçün default export-dan istifadə etmək və vəziyyətin qorunmasını təmin etmək lazımdırsa, ixracatları memo ilə bükmək tövsiyə olunur.

HMR dəstəyi ilə qurma alətləri

Müasir paketləyicilər HMR təmin edir. Webpack — devServer.hot vasitəsilə çevik konfiqurasiya ilə HMR-in pioneri. Vite paketləmədən ani HMR üçün yerli ESM və esbuild-dən istifadə edir. Parcel — sıfır konfiqurasiya HMR. Turbopack — Rust üzərində HMR ilə Vercel-dən yeni paketləyici.

Vite sürəti ilə seçilir — Vite-də HMR brauzerin yerli ES-modulları vasitəsilə işləyir. Fayl dəyişdirildikdə, Vite bütün layihəni yenidən kompilyasiya etmədən yalnız bu modulu import() vasitəsilə göndərir. Webpack hər modulu tam kompilyasiya edir, bu da böyük layihələrdə HMR-i yavaşladır.

Layihələrdə HMR konfiqurasiya nümunələri

Müxtəlif paketləyicilər üçün HMR qurulumunu nəzərdən keçirək. Webpack-də devServer-də hot: true təyin etməli və react-refresh/babel əlavə etməlisiniz. Vite-də HMR istənilən pre-set ilə qutudan çıxır. Next.js-də Fast Refresh turbokompilyator vasitəsilə defolt olaraq aktivdir.

Vite ilə 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 ilə 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'
      }
    ]
  }
};

Qaynar yenidən yükləmənin məhdudiyyətləri və problemləri

HMR bütün ssenarilərdə düzgün işləmir. CSS modulları dinamik siniflərlə tətbiq olunmaya bilər. Qlobal dəyişənlər və sinqletonlar (Redux store, router) yenidən yükləmə zamanı sıfırlana bilər. Ağır kitabxanalar HMR zamanı GC olmadan modulların dəyişdirilməsi səbəbindən bəzən yaddaş sızıntıları yaradır.

HMR problemlərinin həlli — qaynar kodu yan təsirləri olmayan təmiz komponentlərdə təcrid etməkdir. Yan təsirlər (WebSocket abunəlikləri, taymerlər) useEffect-də təmizlənməlidir. Redux üçün sessionStorage-də vəziyyəti saxlayan persister tövsiyə olunur. CSS Modules və ya styled-components kimi CSS həlləri əlavə konfiqurasiya olmadan HMR ilə düzgün işləyir.

Digər bir məhdudiyyət — istehsalatda debug: HMR istehsalat quruluşunda qəsdən söndürülür. Mənbə kodu minifikasiya olunur və istehsalatda qaynar dəyişdirmə mümkün deyil. İstehsalatda xətalarn debug edilməsi üçün source maps və loglaşdırmadan istifadə olunur, lakin HMR-dən yox.