Vite#

อันดับแรกเรามาทำความรู้จักกับ Vite แบบคร่าวๆ กันก่อนเลยครับ

Vite คืออะไร ?#

Vite คือเครื่องมือที่ใช้ในการสร้างและพัฒนาเว็บแอปพลิเคชันอย่างรวดเร็ว (frontend build tool) พัฒนาโดย Evan You ผู้สร้าง Vue.js จุดเด่นของ Vite คือความเร็วและประสิทธิภาพ โดยเฉพาะในการพัฒนาเว็บที่ใช้ JavaScript, Vue, React และเฟรมเวิร์กอื่นๆ

คุณสมบัติหลักของ Vite#

การเริ่มต้นอย่างรวดเร็ว (Fast Cold Starts): Vite ใช้ native ES modules ทำให้ไม่ต้องบันเดิล (bundle) ไฟล์ทั้งหมดก่อนเสมอไป ซึ่งทำให้การเริ่มพัฒนาโปรเจ็กต์เป็นไปได้อย่างรวดเร็ว
การโหลดโมดูลตามความต้องการ (On-Demand Compilation): Vite จะโหลดเฉพาะโมดูลที่จำเป็นในขณะนั้น และคอมไพล์เฉพาะส่วนที่ต้องใช้ ส่งผลให้หน้าเว็บโหลดได้เร็วขึ้น
HMR (Hot Module Replacement): ช่วยให้สามารถอัปเดตหน้าเว็บในระหว่างการพัฒนาโดยไม่ต้องรีเฟรชทั้งหน้า ช่วยให้การพัฒนาแอปพลิเคชันเร็วขึ้น
การบันเดิลโปรดักชันที่มีประสิทธิภาพ: เมื่อทำการ build สำหรับการ deploy, Vite ใช้ Rollup ซึ่งเป็น bundler ที่มีประสิทธิภาพและยืดหยุ่น

Vite เหมาะสำหรับการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ที่ต้องการการพัฒนาและทดสอบอย่างรวดเร็ว

Setup Vite#

Install Node js (หากมีแล้ว Skip)
Open VS code
File > new > terminal
npm create vite@latest > ตั้งชื่อ Project > เลือก Framework
จากนั้นเข้าไปที่โปรเจค cd “my react app” แล้วใช้ npm install > npm run dev

Summary

สร้าง folder ที่ต้องการเก็บ Project ของเราจากนั้น ทำแค่ 3 Step

npm create vite@latest <name-of-project>
npm install    #ทุกครั้ง เพื่อติดตั้งแพคเกจต่างๆ
npm run dev    #เปิด localhost