Vite + React คืออะไร
โดย
ในโลกของการพัฒนาเว็บแอปพลิเคชันด้วย React ที่ต้องการความเร็วทั้งในการพัฒนา และ build โปรเจค Vite (อ่านว่า "วีต") ได้กลายเป็นเครื่องมือยอดนิยมที่เข้ามาแทนที่ Create React App (CRA) บทความนี้จะพาคุณรู้จักกับ Vite ตั้งแต่พื้นฐานไปจนถึงการใช้งานจริงกับ React
- Vite + React -
- ★Vite คืออะไร
Vite เป็นเครื่องมือพัฒนาเว็บสมัยใหม่ (Next Generation Frontend Tooling) ที่
- ออกแบบมาเพื่อความเร็วสูงสุดทั้งในขั้นตอนพัฒนา และ build
- ใช้เทคโนโลยี ES Modules (ESM) แทนการ bundle แบบเดิม
- สนับสนุน Hot Module Replacement (HMR) ที่เร็วมาก
- ทำงานได้กับหลายเฟรมเวิร์กรวมถึง React, Vue, Svelte
- ★Vite ทำงานอย่างไร
1) Development Server
- ใช้ Native ES Modules ของเบราว์เซอร์
- ไม่ต้อง bundle โค้ดทั้งหมดใหม่เมื่อมีเปลี่ยนแปลง
- แบ่งไฟล์ออกเป็นส่วนๆ และ โหลดเมื่อจำเป็น
2) Production Build
- ใช้ Rollup สำหรับการ bundle ที่ optimize
- แบ่งโค้ดออกเป็น chunks อัตโนมัติ
- รองรับ code splitting
- ★ข้อได้เปรียบด้านความเร็ว
- เริ่มเซิร์ฟเวอร์ได้ในพริบตา (น้อยกว่า 1 วินาที)
- อัปเดตเร็วแบบไม่ต้องรีโหลดหน้าเว็บ
- Build time ที่เร็วขึ้น 10-100x เท่า
- ★ประเภทของ Vite Project ของ React
1) React Projects
```bash
npm create vite@latest my-react-app --template react
```
2) React + TypeScript
```bash
npm create vite@latest my-react-ts-app --template react-ts
```
3) React + SWC (เร็วกว่า Babel)
```bash
npm create vite@latest my-swc-app --template react-swc
```
- ★ประโยชน์
✅ เริ่มโปรเจคได้ทันทีด้วยคำสั่งเดียว
✅ Hot Reload ที่เร็วมากพัฒนาได้ลื่นไหล
✅ Config ที่ง่ายกว่า webpack
✅ รองรับ TypeScript, CSS Preprocessors โดยไม่ต้อง config เพิ่ม
✅ Plugin System ที่แข็งแกร่ง
✅ Build Time ที่เร็วขึ้นมาก
- ★ตัวอย่างการใช้งาน
1) สร้างโปรเจคใหม่
```bash
npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev
```
2) ไฟล์ `vite.config.js` พื้นฐาน
```javascript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true
}
})
```
3) การใช้ Environment Variables
สร้างไฟล์ `.env`
```env
VITE_API_URL=https://api.example.com
```
ใช้งานในโค้ด:
```javascript
const apiUrl = import.meta.env.VITE_API_URL
```
- ★Vite VS Create React App (CRA)
☆ Vite
- เวลาเริ่มเซิร์ฟเวอร์: <1 วินาที
- HMR Speed: เร็วมาก
- Config: ง่าย, ยืดหยุ่น
- Build Time: เร็วมาก
- Tree Shaking: ดีมาก
☆ Create React App (CRA)
- เวลาเริ่มเซิร์ฟเวอร์: 10-30 วินาที
- HMR Speed: ปานกลาง
- Config: ซับซ้อน, แก้ไขยาก
- Build Time: ช้า
- Tree Shaking: ดี
- ★เคล็ดลับการใช้ Vite กับ React
1) ใช้ `@vitejs/plugin-react` สำหรับ React Refresh
2) ลองใช้ SWC สำหรับความเร็วที่มากขึ้น
3) ใช้ CSS Modules ได้โดยไม่ต้อง config เพิ่ม
4) อัปเดต Vite เป็นประจำ เพื่อความเร็ว และ ความปลอดภัย
✏️ Shoper Gamer
- ✓React คืออะไร 👇
- ✓React เป็น Library หรือ Framework 👇
Credit :
👇
- ●https://tinyurl.com/ywwn5dr2
- ●https://dev.to/marcqualie/vite-react-quickstart-1bcl
- ●https://vite.dev/guide/
- ●https://vite.dev/
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2025 Blockdit
