What is vite?
# Web Site Writing Basics # vite# Trending # Drug sign with lemon8
Vite (read "wheat" in French, meaning "fast") is a tool that allows the development of the new generation of websites (Build Tools) to be dramatically faster and fluid, developed by Evan You (the same person who created Vue.js), but can be used by both React, Svelte, or even Vanilla JS in general.
What's Vite doing?
If you compare web building like building a house, Vite is a building facility that serves two main parts:
1. Development server environment
While you're writing, Vite runs an emulated Server so you can see the results immediately. The highlight is the fast, split-second Hot Module Replacement (HMR) system. When you press Save Code, the page only updates the changed parts without refresh.
2. Preparation of files for practical use (Bundling)
When the web is finished, the code we write (such as JSX, TypeScript, SCSS) is illegible. Vite uses a tool called Rollup to "Bundle" and "Convert Compile" into basic HTML, CSS, and JS that all browsers understand and work fastest.
Why is Vite "faster" than old-fashioned tools (such as Webpack)?
In the past (Webpack era), when we started programming, the tool had to check all the files in the project and bind them together before opening the Server. If the big project would take a long time, but Vite used a new idea:
Use Native ESM: Vite will not bundle files during development, but will leave the browser to request only the file that we are actually activating.
Esbuilding: Vite uses the Go language to partially manage Dependency, which is 10-100 times faster than regular JavaScript-written tools.
Quick Start
If you already have Node.js installed, you can open Terminal and type this command to create a new project:
Bash
NPM create vite@latest my-vue-app
Then select the desired Framework (such as React or Vue) and select the language (JS or TypeScript).
Brief summary
Vite is the "Run Helper and Pack Helper" that makes the life of the Developer easier. Don't wait long when Compile and get a file that Optimizes well for taking Deploy on hosting.
หลายคนเจอคำว่า Vite ครั้งแรก (รวมถึงเรา) จะงงอยู่ 3 อย่าง: อ่านว่าอะไร, แปลว่าอะไร, แล้วมัน “ทำอะไรให้เรา” ในการพัฒนาเว็บกันแน่ เลยขอสรุปแบบภาษาคนทำโปรเจกต์จริงให้เข้าใจง่ายๆ และเอาไปเริ่มใช้งานได้ทันที Vite อ่านว่าอะไร / แปลว่าอะไร? Vite อ่านว่า “วีท” (มาจากภาษาฝรั่งเศสคำว่า “vite”) ความหมายประมาณว่า “เร็ว” ซึ่งชื่อก็บอกคอนเซ็ปต์เลย: ทำให้การเริ่มโปรเจกต์และการแก้โค้ดระหว่างพัฒนาเร็วขึ้นแบบรู้สึกได้ Vite คืออะไร (ในมุมคนทำเว็บ)? ถ้าอธิบายสั้นๆ Vite คือเครื่องมือช่วย “รันตอนพัฒนา” และ “แพ็กไฟล์ตอน build” ให้เรา - ตอนพัฒนา (dev): มี Development Server ให้เปิดเว็บดูผลได้ทันที และมี Hot Module Replacement (HMR) พอเซฟไฟล์ หน้าเว็บจะอัปเดตเฉพาะส่วนที่เปลี่ยน ไม่ต้องรีเฟรชทั้งหน้า - ตอนเอาขึ้นจริง (build): ช่วยรวม/แปลงไฟล์ (เช่น JSX, TypeScript, SCSS) ให้เป็น HTML/CSS/JS ที่บราวเซอร์อ่านได้ และ optimize ให้พร้อม deploy ทำไมคนถึงนิยม Vite กับ React/Vue? จากประสบการณ์ทำโปรเจกต์เล็กไปจนกลางๆ จุดที่รู้สึกได้คือ “เริ่มไว” และ “แก้โค้ดไว” โดยเฉพาะโปรเจกต์ที่มี dependency เยอะๆ เวลาเปิด dev server หรือแก้ component บ่อยๆ จะประหยัดเวลาไปได้มาก ตัวอย่าง flow งานจริง (อิงภาพในโพสต์): Vite + React + API + Git + Deploy ถ้าคุณทำเว็บแอปแบบครบขั้นตอน มักจะเป็นแนวนี้: 1) สร้างโปรเจกต์ด้วย Vite + React template 2) ทำหน้าเว็บ/ฟอร์ม/ตารางต่างๆ ใน React 3) ต่อ API (เช่นทำ API ง่ายๆ ด้วย Google Apps Script) เพื่ออ่าน/บันทึกข้อมูล 4) ใช้ Git/GitHub จัดการเวอร์ชัน (ทำ branch, commit, push) 5) Deploy ขึ้น Vercel เพื่อให้มีลิงก์ใช้งานจริง Vite จะช่วยให้ข้อ 1-2 ลื่นขึ้นมาก เพราะ dev server และ HMR ทำให้วนลูป “แก้โค้ด-ดูผล” ได้เร็ว ทริคเล็กๆ ตอนเริ่มใช้ (กันพลาด) - ถ้าเครื่องยังไม่มี Node.js ให้ติดตั้งก่อน ไม่งั้นสร้างโปรเจกต์ไม่ได้ - ตอนสร้างโปรเจกต์ เลือก framework (เช่น React/Vue) และเลือก JavaScript หรือ TypeScript ให้เหมาะกับทีม - เวลา deploy ถ้าใช้ Vercel ส่วนมากตั้งค่าได้อัตโนมัติ แค่เช็ก build command และ output ให้ตรงกับโปรเจกต์ Vite (ส่วนใหญ่ค่าเริ่มต้นก็ผ่าน) สรุปแบบจำง่าย Vite = เครื่องมือทำเว็บที่เน้น “เร็ว” ทั้งตอนพัฒนา (HMR เร็ว) และตอน build (แพ็กไฟล์พร้อม deploy) ใช้ได้กับ React/Vue/Vanilla JS และเหมาะมากถ้าคุณอยากเริ่มโปรเจกต์ไวๆ แล้วเอาขึ้นใช้งานจริงบน Vercel ได้ง่าย