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