ดูต้นฉบับสำหรับ Vite for react

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

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

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

=== 1. ในช่วง Development (The Dev Server) ===
เมื่อเราสั่งรัน <code>npm run dev</code> Vite จะใช้วิธีการเสิร์ฟไฟล์แบบสมัยใหม่ที่แตกต่างจาก Webpack เดิม

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

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

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

=== 2. ในช่วง Production (The Build) ===
เมื่อเราสั่งรัน <code>npm run build</code> 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 ===
{| class="wikitable"
! ขั้นตอน !! Traditional Bundler (Webpack) !! Vite
|-
| '''การเริ่ม Server''' || ต้องสแกนแอปทั้งหมด > สร้าง Bundle > ถึงจะเริ่ม Server (ช้า) || เริ่ม Server ได้ทันที
|-
| '''การขอไฟล์ (Request)''' || เสิร์ฟไฟล์ Bundle ก้อนใหญ่ที่สร้างเสร็จแล้ว || 1. เบราว์เซอร์ร้องขอไฟล์<br />2. Vite แปลงไฟล์นั้น<br />3. ส่งกลับ (ทำทีละไฟล์เมื่อถูกเรียก)
|-
| '''เมื่อแก้ไขโค้ด''' || ต้อง Re-bundle ส่วนที่เกี่ยวข้อง (ช้าลงเรื่อยๆ เมื่อแอปใหญ่ขึ้น) || แปลงใหม่เฉพาะไฟล์ที่แก้ (เร็วคงที่เสมอ)
|}

=== สิ่งที่สำคัญสำหรับ React ===
Vite มาพร้อมกับการรองรับ '''React Fast Refresh''' ซึ่งมีประโยชน์มาก:
* เมื่อแก้ไข Component (เช่น เปลี่ยนสี หรือแก้ Layout) หน้าเว็บจะอัปเดตทันที
* '''State ไม่หาย:''' ข้อมูลที่กรอกค้างไว้ในฟอร์ม หรือค่าตัวแปรต่างๆ จะยังคงอยู่ ไม่ถูกรีเซ็ตเหมือนการกด Refresh หน้าเว็บปกติ