Jittat: /* B. ส่วนของ Source Code (Serving on Demand) */

2026-01-01T13:57:59Z

B. ส่วนของ Source Code (Serving on Demand)

Jittat เมื่อ 13:57, 1 มกราคม 2569

2026-01-01T13:57:00Z

แสดงการเปลี่ยนแปลง

Jittat: สร้างหน้าด้วย ": ''หน้านี้เป็นส่วนหนึ่งของวิชา 01204223'' : ''หมายเหตุ: นำมาจาก..."

2026-01-01T13:47:25Z

สร้างหน้าด้วย ": ''หน้านี้เป็นส่วนหนึ่งของวิชา 01204223'' : ''หมายเหตุ: นำมาจาก..."

หน้าใหม่

: ''หน้านี้เป็นส่วนหนึ่งของวิชา [[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 หน้าเว็บปกติ

@@ แถว 49: / แถว 49: @@
 #: <code lang="html"><script type="module" src="/src/main.jsx"></script></code>
 #: Browser จะเห็นคำสั่ง <code>type="module"</code> และส่ง Request เพื่อขอไฟล์ main.jsx
 # '''Vite Intercept (ดักจับและแปลง):'''
 #: Vite Server ได้รับคำขอไฟล์ main.jsx
 #: Vite ทำการอ่านไฟล์ และแปลง (Transpile) โค้ด '''JSX''' ให้เป็น '''Pure JavaScript''' แบบ Real-time
 #: ส่งไฟล์ JS ที่แปลงเสร็จแล้วกลับไปให้ Browser
 # '''Chain Reaction (ลูกโซ่):'''
 #: ในไฟล์ main.jsx มักจะมีคำสั่ง <code>import App from './App'</code>

Vite for react - ประวัติรุ่นแก้ไข

Jittat: /* B. ส่วนของ Source Code (Serving on Demand) */

Jittat เมื่อ 13:57, 1 มกราคม 2569

Jittat: สร้างหน้าด้วย ": ''หน้านี้เป็นส่วนหนึ่งของวิชา 01204223'' : ''หมายเหตุ: นำมาจาก..."