ทำความเข้าใจ Vite ให้เป็นเรื่องง่าย
เครื่องมือรุ่นเก่าอย่าง Webpack หรือ Create React App ทำงานโดยการ bundle โปรเจกต์ทั้งหมดของคุณก่อน เครื่องมือจะอ่านทุกไฟล์และเปลี่ยนให้เป็นไฟล์ JavaScript ขนาดใหญ่เพียงไฟล์เดียว ซึ่งวิธีนี้ใช้ได้ดีกับโปรเจกต์ขนาดเล็ก แต่จะเริ่มมีปัญหาเมื่อเป็นโปรเจกต์ขนาดใหญ่ เพราะในโปรเจกต์ขนาดใหญ่ กระบวนการนี้อาจใช้เวลาหลายวินาที และทุกครั้งที่คุณบันทึกไฟล์ เครื่องมือจะต้องเริ่มทำงานซ้ำใหม่เกือบทั้งหมด
Vite ทำงานแตกต่างออกไป เบราว์เซอร์สมัยใหม่รองรับ ES modules โดยกำเนิด (natively) ซึ่งหมายความว่าเบราว์เซอร์สามารถจัดการการ import และ export ได้ด้วยตัวเอง Vite จึงไม่ทำการ bundle โค้ดของคุณในระหว่างการพัฒนา แต่จะส่งไฟล์แต่ละไฟล์ในรูปแบบโมดูลแยกกันเฉพาะเมื่อเบราว์เซอร์ร้องขอเท่านั้น
ลองนึกถึงร้านอาหารแบบบุฟเฟต์ เชฟต้องปรุงอาหารทุกจานให้เสร็จก่อนที่จะเปิดประตูร้าน หากคุณต้องการเปลี่ยนแปลงอะไรเพียงเล็กน้อย เชฟก็ต้องทำบุฟเฟต์ใหม่ทั้งหมด นี่คือลักษณะการทำงานของ Webpack ยิ่งโปรเจกต์ใหญ่ขึ้น คุณก็ยิ่งต้องรอนานขึ้น
Vite เปรียบเสมือนร้านอาหารแบบ à la carte ที่เปิดประตูต้อนรับได้ทันที คุณสั่งอาหารหนึ่งจาน เชฟก็จะเตรียมเฉพาะจานนั้น หากคุณต้องการของหวานในภายหลัง เชฟก็จะเตรียมแค่ของหวานเท่านั้น คุณไม่ต้องรอให้อาหารทุกอย่างในเมนูพร้อมเสิร์ฟ
Vite ใช้สองกลยุทธ์ที่แตกต่างกันเพื่อตอบโจทย์ความต้องการที่ต่างกัน:
การพัฒนา (vite dev) • กลยุทธ์: ส่งโมดูล ESM แบบ native โดยไม่มีการ bundle • ความเร็วในการเริ่มต้น: ทันที ไม่ขึ้นอยู่กับขนาดของโปรเจกต์ • ทำไม: การเรียกใช้งานผ่าน HTTP ในเครื่องคอมพิวเตอร์ของคุณนั้นรวดเร็วมาก
การใช้งานจริง (vite build) • กลยุทธ์: bundle ทุกอย่างโดยใช้ Rolldown • ความเร็วในการเริ่มต้น: เวลาที่ใช้จะเพิ่มขึ้นตามขนาดของโปรเจกต์ • ทำไม: การมีไฟล์แยกกันหลายร้อยไฟล์จะทำให้เกิดการเรียกใช้งาน HTTP มากเกินไปสำหรับผู้ใช้งาน การ bundle จึงเข้ามาช่วยแก้ปัญหานี้
Vite มอบความรวดเร็วในขณะที่คุณเขียนโค้ด และมอบประสิทธิภาพเมื่อคุณเปิดใช้งานจริง
ที่มา: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62