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 runtime прима закрпу, замењује стари модул новим и обавештава претплатнике модула.

Фаза компилације и слања

Webpack Dev Server користи WebSocket за комуникацију са клијентом. При промени датотеке, бандлер креира hot-update.js и hot-update.json са манифестом промена. Клијент аутоматски учитава ове датотеке путем JSONP.

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

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

Примена модула на клијенту

HMR runtime у прегледачу проверава да ли модул који се замењује подржава accept. Ако је модул декларисао module.hot.accept(), runtime га замењује на лицу места и покреће повратни позив ажурирања. Ако accept није декларисан, HMR пада на виши ниво, ка родитељском модулу.

У React Fast Refresh-у ова логика је уграђена на нивоу фрејмворка — није потребно ручно писати module.hot.accept у свакој датотеци. Babel-plugin 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 — званична имплементација Hot Reload-а оптимизована за React компоненте. Заменила је стари механизам React Hot Loader, који је био нестабилан и захтевао ручну конфигурацију. Fast Refresh је уграђен у Create React App, Next.js, Vite и Webpack путем react-refresh/babel.

Подршка за функционалне компоненте

Fast Refresh исправно чува стање функционалних компонената при промени њиховог кода. Ако мењате само JSX ознаке — useState и други hook-ови задржавају своје вредности. Ако се логика hook-а мења — долази до поновног монтирања компоненте.

// Primer - stanje očuvano kada se JSX menja
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 не чува стање ако нови код садржи грешку компилације. Ако се компонента не извози подразумевано (default export), већ поименично (named export), стање се такође може изгубити. Препоручује се коришћење default export за компоненте и умотавање извоза у memo ако је потребно гарантовати очување стања.

Алати за изградњу са HMR подршком

Модерни бандлери пружају HMR. Webpack — пионир HMR-а са флексибилном конфигурацијом кроз devServer.hot. Vite користи нативни ESM и esbuild за тренутни HMR без бандловања. Parcel — HMR без конфигурације. Turbopack — нови бандлер од Vercel-а са HMR-ом на Rust-у.

Vite се истиче по брзини — HMR у Vite-у ради путем нативних ES модула прегледача. При промени датотеке, Vite шаље само тај модул путем import(), без поновне компилације целог пројекта. Webpack компилира сваки модул у целини, што у великим пројектима успорава HMR.

Примери конфигурације HMR у пројектима

Размотримо подешавање HMR-а за различите бандлере. У Webpack-у потребно је поставити hot: true у devServer и додати react-refresh/babel. У Vite-у HMR ради из кутије са било којим пресетом. У Next.js-у Fast Refresh је подразумеван путем турбокомпилатора.

Vite са 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 са 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'
      }
    ]
  }
};

Ограничења и проблеми врућег поновног учитавања

HMR не ради исправно у свим сценаријима. CSS модули са динамичким класама могу да се не примене. Глобалне променљиве и синглони (Redux store, router) могу да се ресетују при поновном учитавању. Тешке библиотеке при HMR-у понекад генеришу цурење меморије због замене модула без GC.

Решење проблема HMR-а — изоловати врући код у чисте компоненте без нуспоредних ефеката. Нуспоредни ефекти (WebSocket претплате, тајмери) треба да се чисте у useEffect-у. За Redux се препоручује persister који чува стање у sessionStorage. CSS решења попут CSS Modules или styled-components раде исправно са HMR-ом без додатне конфигурације.

Још једно ограничење — отклањање грешака у производњи: HMR је намерно искључен у производној компилацији. Изворни код је минификован, и врућа замена у производњи је немогућа. За отклањање грешака у производњи користе се source maps и логовање, али не HMR.