Vite for react

หน้านี้เป็นส่วนหนึ่งของวิชา 01204223

หมายเหตุ: นำมาจากคำตอบของ Gemini

การทำงานเบื้องหลังของ Vite (How Vite Works)

Vite (อ่านว่า "วีท" มาจากภาษาฝรั่งเศสแปลว่า "เร็ว") เปลี่ยนวิธีการเสิร์ฟ React Application โดยแบ่งกลยุทธ์การทำงานออกเป็น 2 ช่วงอย่างชัดเจน คือช่วง Development และช่วง Production

1. ในช่วง Development (The Dev Server)

เมื่อเราสั่งรัน npm run dev Vite จะใช้วิธีการเสิร์ฟไฟล์แบบสมัยใหม่ที่แตกต่างจาก Webpack เดิม

• Native ESM (ECMAScript Modules):
  • เบราว์เซอร์ยุคใหม่สามารถเข้าใจคำสั่ง import และ export ได้ด้วยตัวเอง
  • Vite จึงไม่ต้องเสียเวลา "มัดรวม" (Bundle) ไฟล์ทั้งโปรเจกต์ก่อนเริ่ม Server แต่จะเริ่ม Server ทันที
  • เมื่อเบราว์เซอร์ต้องการไฟล์ใด (เช่น App.jsx) เบราว์เซอร์จะส่ง Request ไปหา Vite จากนั้น Vite จะทำการแปลง (Compile) ไฟล์นั้นจาก JSX เป็น JavaScript มาตรฐาน แล้วส่งกลับไปให้เบราว์เซอร์ทันที (On-demand serving)

• Dependency Pre-bundling (ด้วย esbuild):
  • สำหรับ Library ภายนอกที่ไม่ค่อยมีการเปลี่ยนแปลง (เช่น react, lodash) Vite จะทำการมัดรวมล่วงหน้า
  • Vite ใช้เครื่องมือที่ชื่อว่า esbuild (เขียนด้วยภาษา Go ซึ่งทำงานเร็วกว่าเครื่องมือที่เขียนด้วย JS ถึง 10-100 เท่า)
  • ขั้นตอนนี้ช่วยแปลง module แบบเก่า (CommonJS) ให้เป็น ESM ที่เบราว์เซอร์อ่านได้ และลดจำนวน HTTP requests

• HMR (Hot Module Replacement):
  • เมื่อมีการแก้ไขไฟล์ Vite จะคำนวณและส่งอัปเดตเฉพาะไฟล์ที่เปลี่ยนแปลงไปยังเบราว์เซอร์
  • ทำให้การแก้ไขโค้ดแสดงผลแทบจะทันที ไม่ว่าแอปพลิเคชันจะมีขนาดใหญ่แค่ไหนก็ตาม

2. ในช่วง Production (The Build)

เมื่อเราสั่งรัน npm run build Vite จะเปลี่ยนเครื่องมือในการทำงาน เพื่อให้ได้ไฟล์ที่มีประสิทธิภาพสูงสุดสำหรับผู้ใช้งานจริง

• Bundling ด้วย Rollup:
  • แม้ Native ESM จะดีสำหรับการพัฒนา แต่ในการใช้งานจริง การให้เบราว์เซอร์โหลดไฟล์ย่อยๆ จำนวนมากจะทำให้เว็บช้า (Waterfall effect)
  • Vite จึงใช้ Rollup ในการมัดรวมโค้ด สร้างเป็น Static Assets (HTML, CSS, JS) ที่พร้อมใช้งาน

• Optimization Features:
  • Tree Shaking: ตัดโค้ดส่วนเกินที่ไม่ได้ถูกเรียกใช้งานทิ้งไป เพื่อลดขนาดไฟล์
  • Code Splitting: แยกไฟล์ออกเป็นก้อนย่อยๆ (Chunks) เพื่อให้โหลดเฉพาะสิ่งที่จำเป็นสำหรับหน้านั้นๆ
  • Minification: บีบอัดไฟล์ให้มีขนาดเล็กที่สุด

ตารางเปรียบเทียบ: Traditional Bundler (Webpack) vs Vite

ขั้นตอน	Traditional Bundler (Webpack)	Vite
การเริ่ม Server	ต้องสแกนแอปทั้งหมด > สร้าง Bundle > ถึงจะเริ่ม Server (ช้า)	เริ่ม Server ได้ทันที
การขอไฟล์ (Request)	เสิร์ฟไฟล์ Bundle ก้อนใหญ่ที่สร้างเสร็จแล้ว	1. เบราว์เซอร์ร้องขอไฟล์ 2. Vite แปลงไฟล์นั้น 3. ส่งกลับ (ทำทีละไฟล์เมื่อถูกเรียก)
เมื่อแก้ไขโค้ด	ต้อง Re-bundle ส่วนที่เกี่ยวข้อง (ช้าลงเรื่อยๆ เมื่อแอปใหญ่ขึ้น)	แปลงใหม่เฉพาะไฟล์ที่แก้ (เร็วคงที่เสมอ)

สิ่งที่สำคัญสำหรับ React

Vite มาพร้อมกับการรองรับ React Fast Refresh ซึ่งมีประโยชน์มาก:

• เมื่อแก้ไข Component (เช่น เปลี่ยนสี หรือแก้ Layout) หน้าเว็บจะอัปเดตทันที
• State ไม่หาย: ข้อมูลที่กรอกค้างไว้ในฟอร์ม หรือค่าตัวแปรต่างๆ จะยังคงอยู่ ไม่ถูกรีเซ็ตเหมือนการกด Refresh หน้าเว็บปกติ