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() รันไทม์จะแทนที่ในที่และเรียกใช้ callback การอัปเดต หากไม่ได้ประกาศ 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 มิลลิวินาที ด้วย 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 และฮุกอื่นๆ จะคงค่าของมันไว้ หากตรรกะของฮุกเปลี่ยนไป คอมโพเนนต์จะถูกเมาท์ใหม่

// ตัวอย่าง - สถานะถูกเก็บรักษาเมื่อ 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 สำหรับคอมโพเนนต์และห่อ 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, เราเ���อร์) อาจรีเซ็ตเมื่อโหลดซ้ำ ไลบรารีหนัก ใน HMR บางครั้งอาจทำให้เกิดการรั่วไหลของหน่วยความจำเนื่องจากการแทนที่โมดูลโดยไม่มีการเก็บขยะ

วิธีแก้ปัญหา HMR คือการแยก โค้ดร้อน ออกเป็นคอมโพเนนต์บริสุทธิ์ที่ไม่มีผลข้างเคียง ผลข้างเคียง (การสมัครรับ WebSocket, ตัวจับเวลา) ควรทำความสะอาดใน useEffect สำหรับ Redux แนะนำให้ใช้ persister ที่บันทึกสถานะใน sessionStorage โซลูชัน CSS เช่น CSS Modules หรือ styled-components ทำงานอย่างถูกต้องกับ HMR โดยไม่ต้องกำหนดค่าเพิ่มเติม

ข้อจำกัดอีกประการคือ การดีบักในโปรดักชัน: HMR ถูกปิดใช้งานโดยเจตนาในบิลด์โปรดักชัน ซอร์สโค้ดถูกย่อขนาดและการแทนที่แบบร้อนในโปรดักชันเป็นไปไม่ได้ ในการดีบักข้อผิดพลาดในโปรดักชัน ให้ใช้ source maps และการบันทึก แต่ไม่ใช่ HMR