Vite for react

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

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

บทความนี้อธิบายกลไกการทำงานเบื้องหลังของ Vite (อ่านว่า "วีท") ซึ่งเป็นเครื่องมือ Build Tool ยุคใหม่สำหรับการพัฒนาเว็บ โดยเปรียบเทียบกับเครื่องมือยุคเก่าและอธิบายความจำเป็นทางเทคนิค

ปัญหาพื้นฐาน: ทำไมเราเขียนโค้ดแล้วรันบน Browser เลยไม่ได้?

ในการพัฒนา React ผู้พัฒนามักจะเขียนโค้ดด้วยภาษาและรูปแบบที่ Browser ไม่เข้าใจโดยตรง:

• JSX (JavaScript XML): การเขียน HTML แทรกอยู่ในโค้ด JavaScript (เช่นในไฟล์ App.jsx)
• Modern JavaScript (ES6+): ฟีเจอร์ใหม่ๆ ที่ Browser เก่าอาจยังไม่รองรับ
• Module System: การแยกไฟล์เป็นชิ้นเล็กๆ จำนวนมาก (ไฟล์ .jsx, .css, .svg)

หากไม่มีเครื่องมือจัดการ (Build Tool) Browser จะไม่สามารถประมวลผลไฟล์เหล่านี้ได้ จึงต้องมีกระบวนการ Transpilation (แปลงโค้ดให้อยู่ในรูปที่ Browser อ่านออก) และ Bundling (รวมไฟล์)

2. ยุคก่อนหน้า: ปัญหาของ Webpack (Bundler-based)

ในอดีต เครื่องมือมาตรฐานคือ Webpack ซึ่งใช้วิธีการแบบ "Bundling-first"

กระบวนการของ Webpack

1. สแกนไฟล์ทั้งหมดในโปรเจกต์ (ตั้งแต่เริ่มต้น)
2. แปลงโค้ด (Transpile) ทุกไฟล์
3. มัดรวมทุกไฟล์ให้เป็นไฟล์เดียว (Bundle) เช่น bundle.js
4. เริ่มต้น Server เพื่อส่งไฟล์นั้นให้ Browser

ข้อเสีย

เมื่อโปรเจกต์ใหญ่ขึ้น การต้อง "มัดรวมทุกไฟล์" ก่อนเริ่มทำงาน ทำให้การ start server ช้ามาก (อาจกินเวลาหลายนาที) และเมื่อแก้โค้ดเพียงบรรทัดเดียว ระบบต้องคำนวณ Bundle ใหม่เกือบทั้งหมด

3. วิธีการของ Vite: Native ESM (Server-based)

Vite แก้ปัญหาความช้าด้วยการ ไม่ Bundle โค้ดของผู้พัฒนาในขั้นตอน Development แต่จะใช้ฟีเจอร์ของ Browser ยุคใหม่ที่เรียกว่า Native ESM (ECMAScript Modules) แทน

ขั้นตอนการทำงานเมื่อเริ่มรัน (npm run dev)

เมื่อนักพัฒนาสั่งรัน Vite จะเกิดกระบวนการดังนี้:

A. ส่วนของ Dependencies (Pre-bundling)

ไลบรารีภายนอก (ในโฟลเดอร์ node_modules) มักมีขนาดใหญ่และมีการเขียนโค้ดหลายรูปแบบ (CommonJS, UMD)

• Vite จะใช้เครื่องมือที่ชื่อว่า esbuild (เขียนด้วยภาษา Go ทำงานเร็วกว่า JS 10-100 เท่า) เพื่อแปลงไลบรารีเหล่านี้ให้เป็นมาตรฐานเดียวกัน (ESM)
• เหตุผล: เพื่อลดจำนวน HTTP Request และแปลงภาษาให้ Browser เข้าใจ

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

Vite จะเริ่มต้น Server ทันทีโดย ไม่แปลงโค้ดโปรเจกต์ จนกว่า Browser จะร้องขอ

ลำดับการทำงานเมื่อเปิดหน้าเว็บ

1. Browser ร้องขอไฟล์ Entry Point:

   Browser อ่านไฟล์ index.html ซึ่งมีบรรทัดสำคัญคือ:

   <script type="module" src="/src/main.jsx"></script>

   Browser จะเห็นคำสั่ง type="module" และส่ง Request เพื่อขอไฟล์ main.jsx

1. Vite Intercept (ดักจับและแปลง):

   Vite Server ได้รับคำขอไฟล์ main.jsx

   Vite ทำการอ่านไฟล์ และแปลง (Transpile) โค้ด JSX ให้เป็น Pure JavaScript แบบ Real-time

   ส่งไฟล์ JS ที่แปลงเสร็จแล้วกลับไปให้ Browser

1. Chain Reaction (ลูกโซ่):

   ในไฟล์ main.jsx มักจะมีคำสั่ง import App from './App'

   Browser จะส่ง Request ขอไฟล์ App.jsx ต่อ

   Vite ก็จะทำหน้าที่แปลง App.jsx และส่งกลับไป

แผนภาพเปรียบเทียบ

Webpack (เก่า)	Vite (ใหม่)
สร้าง Bundle ทั้งก้อนก่อน -> เสิร์ฟ	เสิร์ฟทันที -> แปลงเฉพาะไฟล์ที่ Browser ขอ
แก้ไฟล์เดียว -> Re-bundle ส่วนใหญ่	แก้ไฟล์เดียว -> แปลงใหม่แค่ไฟล์นั้น (HMR)

4. ไฟล์สำคัญที่เกี่ยวข้อง

ในการพัฒนา React ด้วย Vite ไฟล์เหล่านี้คือหัวใจหลักของกระบวนการ:

• index.html

  เป็นไฟล์เดียวที่ Browser โหลดจริงๆ ทำหน้าที่เป็นจุดเริ่มต้น (Entry Point)

  ข้อแตกต่างจากอดีต: ไฟล์นี้อยู่นอกโฟลเดอร์ public และมีการอ้างอิงไฟล์ .jsx โดยตรง ซึ่งเป็นสิ่งที่ Vite จะเข้ามาจัดการ

• src/main.jsx (หรือ index.jsx)

  เป็นไฟล์ JavaScript หลักที่จะถูกเรียกจาก index.html

  หน้าที่คือทำการ "Mount" ตัว React Application เข้าไปใน DOM (HTML)

  Vite จะแปลง syntax <React.StrictMode> หรือการ import CSS ให้เป็น JS ที่ Browser รันได้

5. กระบวนการ Production (npm run build)

แม้ตอน Development Vite จะแยกไฟล์เพื่อความเร็ว แต่เมื่อนำขึ้น Server จริง (Production) การแยกไฟล์เป็นร้อยๆ ไฟล์จะทำให้เว็บช้า (เพราะ Browser ต้องส่ง Request จำนวนมาก)

Vite จึงใช้เครื่องมือชื่อ Rollup ในการทำขั้นตอนสุดท้าย:

• Bundling: มัดรวมโค้ดกลับเป็นไฟล์เดียว (หรือไม่กี่ไฟล์)
• Tree Shaking: ตัดฟังก์ชันหรือโค้ดส่วนที่ "ไม่ได้ถูกเรียกใช้" ทิ้งไป เพื่อลดขนาดไฟล์
• Minification: บีบอัดไฟล์ให้อ่านยากแต่ขนาดเล็กที่สุด