ผลต่างระหว่างรุ่นของ "Vite for react"

จาก Theory Wiki
ไปยังการนำทาง ไปยังการค้นหา
(สร้างหน้าด้วย ": ''หน้านี้เป็นส่วนหนึ่งของวิชา 01204223'' : ''หมายเหตุ: นำมาจาก...")
 
แถว 3: แถว 3:
 
: ''หมายเหตุ: นำมาจากคำตอบของ Gemini''
 
: ''หมายเหตุ: นำมาจากคำตอบของ Gemini''
  
−
== การทำงานเบื้องหลังของ Vite (How Vite Works) ==
+
บทความนี้อธิบายกลไกการทำงานเบื้องหลังของ '''Vite''' (อ่านว่า "วีท") ซึ่งเป็นเครื่องมือ Build Tool ยุคใหม่สำหรับการพัฒนาเว็บ โดยเปรียบเทียบกับเครื่องมือยุคเก่าและอธิบายความจำเป็นทางเทคนิค
−
Vite (อ่านว่า "วีท" มาจากภาษาฝรั่งเศสแปลว่า "เร็ว") เปลี่ยนวิธีการเสิร์ฟ React Application โดยแบ่งกลยุทธ์การทำงานออกเป็น 2 ช่วงอย่างชัดเจน คือช่วง '''Development''' และช่วง '''Production'''
 
  
−
=== 1. ในช่วง Development (The Dev Server) ===
+
== ปัญหาพื้นฐาน: ทำไมเราเขียนโค้ดแล้วรันบน Browser เลยไม่ได้? ==
−
เมื่อเราสั่งรัน <code>npm run dev</code> Vite จะใช้วิธีการเสิร์ฟไฟล์แบบสมัยใหม่ที่แตกต่างจาก Webpack เดิม
 
  
−
* '''Native ESM (ECMAScript Modules):'''
+
ในการพัฒนา React ผู้พัฒนามักจะเขียนโค้ดด้วยภาษาและรูปแบบที่ Browser ไม่เข้าใจโดยตรง:
−
** เบราว์เซอร์ยุคใหม่สามารถเข้าใจคำสั่ง <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):'''
+
* '''JSX (JavaScript XML):''' การเขียน HTML แทรกอยู่ในโค้ด JavaScript (เช่นในไฟล์ App.jsx)
−
** สำหรับ Library ภายนอกที่ไม่ค่อยมีการเปลี่ยนแปลง (เช่น <code>react</code>, <code>lodash</code>) Vite จะทำการมัดรวมล่วงหน้า
+
* '''Modern JavaScript (ES6+):''' ฟีเจอร์ใหม่ๆ ที่ Browser เก่าอาจยังไม่รองรับ
−
** Vite ใช้เครื่องมือที่ชื่อว่า '''esbuild''' (เขียนด้วยภาษา Go ซึ่งทำงานเร็วกว่าเครื่องมือที่เขียนด้วย JS ถึง 10-100 เท่า)
+
* '''Module System:''' การแยกไฟล์เป็นชิ้นเล็กๆ จำนวนมาก (ไฟล์ .jsx, .css, .svg)
−
** ขั้นตอนนี้ช่วยแปลง module แบบเก่า (CommonJS) ให้เป็น ESM ที่เบราว์เซอร์อ่านได้ และลดจำนวน HTTP requests
 
  
−
* '''HMR (Hot Module Replacement):'''
+
หากไม่มีเครื่องมือจัดการ (Build Tool) Browser จะไม่สามารถประมวลผลไฟล์เหล่านี้ได้ จึงต้องมีกระบวนการ '''Transpilation''' (แปลงโค้ดให้อยู่ในรูปที่ Browser อ่านออก) และ '''Bundling''' (รวมไฟล์)
−
** เมื่อมีการแก้ไขไฟล์ Vite จะคำนวณและส่งอัปเดตเฉพาะไฟล์ที่เปลี่ยนแปลงไปยังเบราว์เซอร์
 
−
** ทำให้การแก้ไขโค้ดแสดงผลแทบจะทันที ไม่ว่าแอปพลิเคชันจะมีขนาดใหญ่แค่ไหนก็ตาม
 
  
−
=== 2. ในช่วง Production (The Build) ===
+
== 2. ยุคก่อนหน้า: ปัญหาของ Webpack (Bundler-based) ==
−
เมื่อเราสั่งรัน <code>npm run build</code> Vite จะเปลี่ยนเครื่องมือในการทำงาน เพื่อให้ได้ไฟล์ที่มีประสิทธิภาพสูงสุดสำหรับผู้ใช้งานจริง
 
  
−
* '''Bundling ด้วย Rollup:'''
+
ในอดีต เครื่องมือมาตรฐานคือ '''Webpack''' ซึ่งใช้วิธีการแบบ "Bundling-first"
−
** แม้ Native ESM จะดีสำหรับการพัฒนา แต่ในการใช้งานจริง การให้เบราว์เซอร์โหลดไฟล์ย่อยๆ จำนวนมากจะทำให้เว็บช้า (Waterfall effect)
 
−
** Vite จึงใช้ '''Rollup''' ในการมัดรวมโค้ด สร้างเป็น Static Assets (HTML, CSS, JS) ที่พร้อมใช้งาน
 
  
−
* '''Optimization Features:'''
+
; กระบวนการของ Webpack:
−
** '''Tree Shaking:''' ตัดโค้ดส่วนเกินที่ไม่ได้ถูกเรียกใช้งานทิ้งไป เพื่อลดขนาดไฟล์
+
# สแกนไฟล์ทั้งหมดในโปรเจกต์ (ตั้งแต่เริ่มต้น)
−
** '''Code Splitting:''' แยกไฟล์ออกเป็นก้อนย่อยๆ (Chunks) เพื่อให้โหลดเฉพาะสิ่งที่จำเป็นสำหรับหน้านั้นๆ
+
# แปลงโค้ด (Transpile) ทุกไฟล์
−
** '''Minification:''' บีบอัดไฟล์ให้มีขนาดเล็กที่สุด
+
# มัดรวมทุกไฟล์ให้เป็นไฟล์เดียว (Bundle) เช่น bundle.js
 +
# เริ่มต้น Server เพื่อส่งไฟล์นั้นให้ Browser
  
−
=== ตารางเปรียบเทียบ: Traditional Bundler (Webpack) vs Vite ===
+
; ข้อเสีย:
 +
เมื่อโปรเจกต์ใหญ่ขึ้น การต้อง "มัดรวมทุกไฟล์" ก่อนเริ่มทำงาน ทำให้การ 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 จะร้องขอ
 +
 
 +
; ลำดับการทำงานเมื่อเปิดหน้าเว็บ:
 +
# '''Browser ร้องขอไฟล์ Entry Point:'''
 +
#: Browser อ่านไฟล์ index.html ซึ่งมีบรรทัดสำคัญคือ:
 +
#: <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>
 +
#: Browser จะส่ง Request ขอไฟล์ App.jsx ต่อ
 +
#: Vite ก็จะทำหน้าที่แปลง App.jsx และส่งกลับไป
 +
 
 +
=== แผนภาพเปรียบเทียบ ===
 
{| class="wikitable"
 
{| class="wikitable"
−
! ขั้นตอน !! Traditional Bundler (Webpack) !! Vite
+
! Webpack (เก่า) !! Vite (ใหม่)
−
|-
 
−
| '''การเริ่ม Server''' || ต้องสแกนแอปทั้งหมด > สร้าง Bundle > ถึงจะเริ่ม Server (ช้า) || เริ่ม Server ได้ทันที
 
 
|-
 
|-
−
| '''การขอไฟล์ (Request)''' || เสิร์ฟไฟล์ Bundle ก้อนใหญ่ที่สร้างเสร็จแล้ว || 1. เบราว์เซอร์ร้องขอไฟล์<br />2. Vite แปลงไฟล์นั้น<br />3. ส่งกลับ (ทำทีละไฟล์เมื่อถูกเรียก)
+
| สร้าง Bundle ทั้งก้อนก่อน -> เสิร์ฟ || เสิร์ฟทันที -> แปลงเฉพาะไฟล์ที่ Browser ขอ
 
|-
 
|-
−
| '''เมื่อแก้ไขโค้ด''' || ต้อง Re-bundle ส่วนที่เกี่ยวข้อง (ช้าลงเรื่อยๆ เมื่อแอปใหญ่ขึ้น) || แปลงใหม่เฉพาะไฟล์ที่แก้ (เร็วคงที่เสมอ)
+
| แก้ไฟล์เดียว -> Re-bundle ส่วนใหญ่ || แก้ไฟล์เดียว -> แปลงใหม่แค่ไฟล์นั้น (HMR)
 
|}
 
|}
  
−
=== สิ่งที่สำคัญสำหรับ React ===
+
== 4. ไฟล์สำคัญที่เกี่ยวข้อง ==
−
Vite มาพร้อมกับการรองรับ '''React Fast Refresh''' ซึ่งมีประโยชน์มาก:
+
 
−
* เมื่อแก้ไข Component (เช่น เปลี่ยนสี หรือแก้ Layout) หน้าเว็บจะอัปเดตทันที
+
ในการพัฒนา React ด้วย Vite ไฟล์เหล่านี้คือหัวใจหลักของกระบวนการ:
−
* '''State ไม่หาย:''' ข้อมูลที่กรอกค้างไว้ในฟอร์ม หรือค่าตัวแปรต่างๆ จะยังคงอยู่ ไม่ถูกรีเซ็ตเหมือนการกด Refresh หน้าเว็บปกติ
+
 
 +
* '''index.html'''
 +
*: เป็นไฟล์เดียวที่ Browser โหลดจริงๆ ทำหน้าที่เป็นจุดเริ่มต้น (Entry Point)
 +
*: '''ข้อแตกต่างจากอดีต:''' ไฟล์นี้อยู่นอกโฟลเดอร์ public และมีการอ้างอิงไฟล์ .jsx โดยตรง ซึ่งเป็นสิ่งที่ Vite จะเข้ามาจัดการ
 +
 
 +
* '''src/main.jsx''' (หรือ index.jsx)
 +
*: เป็นไฟล์ JavaScript หลักที่จะถูกเรียกจาก index.html
 +
*: หน้าที่คือทำการ "Mount" ตัว React Application เข้าไปใน DOM (HTML)
 +
*: Vite จะแปลง syntax <code><React.StrictMode></code> หรือการ import CSS ให้เป็น JS ที่ Browser รันได้
 +
 
 +
== 5. กระบวนการ Production (npm run build) ==
 +
 
 +
แม้ตอน Development Vite จะแยกไฟล์เพื่อความเร็ว แต่เมื่อนำขึ้น Server จริง (Production) การแยกไฟล์เป็นร้อยๆ ไฟล์จะทำให้เว็บช้า (เพราะ Browser ต้องส่ง Request จำนวนมาก)
 +
 
 +
Vite จึงใช้เครื่องมือชื่อ '''Rollup''' ในการทำขั้นตอนสุดท้าย:
 +
* '''Bundling:''' มัดรวมโค้ดกลับเป็นไฟล์เดียว (หรือไม่กี่ไฟล์)
 +
* '''Tree Shaking:''' ตัดฟังก์ชันหรือโค้ดส่วนที่ "ไม่ได้ถูกเรียกใช้" ทิ้งไป เพื่อลดขนาดไฟล์
 +
* '''Minification:''' บีบอัดไฟล์ให้อ่านยากแต่ขนาดเล็กที่สุด

รุ่นแก้ไขเมื่อ 13:57, 1 มกราคม 2569

หน้านี้เป็นส่วนหนึ่งของวิชา 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: บีบอัดไฟล์ให้อ่านยากแต่ขนาดเล็กที่สุด
ดึงข้อมูลจาก "https://theory.cpe.ku.ac.th/wiki/index.php?title=Vite_for_react&oldid=59712"