⚡Vite

Next Generation Frontend Tooling

ปกติแล้วเวลาเราจะสร้างโปรเจค React เราจะใช้เครื่องมือ Create React App (CRA) ซึ่งเครื่องมือตัวนี้จะจัดการเครื่องมือและไลบรารี่ที่ต้องใช้ใน React และ Template ของโปรแกรมให้เรียบร้อย ทำให้นักพัฒนาที่ต้องการเขียนโปรแกรม React นั้นได้เริ่มต้นการเขียนโปรแกรมได้เลย โดยไม่ต้องไปติดตั้งและตั้งค่าเครื่องมือเริ่มต้น

What Is Vite Used For?

Vite คือ Build tool ที่เน้นไปที่ความรวดเร็วและสร้างประสบการณ์ที่ดีแก่นักพัฒนาสมัยใหม่ ซึ่งประกอบไปด้วย dev server และ build complie ซึ่งสร้างโดย Evan You ผู้สร้าง Vue.js framework เป็น tools สำหรับ generation frontend dev server , bundling และส่งมอบประสบการณ์ที่ดีแก่ผู้พัฒนา ข้อดีคือ มีความเร็ว ตามชื่อ Vite (อ่านว่า /vit/) มาจากภาษาฝรั่งเศษ แปลว่าเร็ว

Vite ใช้ประโยชน์จาก native ES modules ซึ่งมันได้รับการ Support ใน Browser ที่เหมาะแก่การพัฒนา

Vite รัน server โดยการ compile และ serve ข้อมูลทันทีผ่าน ES modules. วิธีนี้ช่วยให้ประมวลผล code ที่จำเป็นในขณะนั้น ดังนั้น Vite จะจัดการกับ code ที่จำเป็นขณะ server startup and code update ได้ดี

อีกหนึ่งเหตุผลที่ Vite ทำงานได้รวดเร็วมากก็เพราะว่าใช้ esbuild สำหรับการ pre-building dependency ระหว่างอยู่ใน development แตกต่างจาก CRA ที่ใช้ Webpack ในการ complie

esbuild คือ javascript bundle ที่รวดเร็วมาก ถูกพัฒนาขึ้นโดยใช้ภาษา Go language ซึ่งเร็วกว่า javascript bundle ปกติถึง 10-100 เท่า

จากภาพด้านล่างจะเป็นการเปรียบเทียบระหว่าง esbuild กับ bundle ตัวอื่นๆ อย่างเช่น Webpack , Rollup และ Pacel ซึ่งทั้งหมดถูกพัฒนาโดย javascript

Vite vs Webpack

webpack เป็นหนึ่งในอีก tools bundle ที่ได้รับความนิยมสูงสุดตัวนึงสำหรับการพัฒนา web project แต่มันช้ากว่า Vite มาก เพราะว่า Vite ใช้ native Es module ซึ่งมีความเร็วและเป็นข้อได้เปรียบกว่า webpack เพราะว่า Vite มีจัดการ code และ bundleing dependency ที่แตกต่างกัน webpack จะรวมไฟล์ทั้งหมดใน project ก่อนที่ development server พร้อม ซึ่งเป็นเหตุผลสำคัญที่ทำให้ webpack นั้นทำงานได้ช้ากว่า Vite มาก โดยเฉพาะเมื่อ project ที่มีขนาดใหญ่ เพราะว่าจำนวน code ที่มีขนาดมากขึ้นทำให้ webpack ต้องมีการ complie ที่ยาวนานมากขึ้น

ในทำนองเดียวกัน module hot reload หรือ เมื่อ code มีการ update webpack จะต้องทำการประมวลผลเพิ่มเติม เพื่อ update bundle และ serve code ล่าสุดไปยัง development แต่ไม่ใช่กรณีของ Vite เนื่องจาก Vite ใช้ native Es Module จากภาพด่านล่างจะเห็นได้ว่า Vite ประมวลผลไฟล์อย่างไร

ถ้าเรามีเว็บที่มีจำนวนหน้ามากมายอย่างเช่น หน้า home , about , contanct และ อื่นๆเป็นต้น ถ้าเราเข้าแค่หน้า home page เราต้องการ code แค่ในส่วนของหน้า home page เท่านั้น และนั่นคือสิ่งที่ Vite ทำ แตกต่างตาก webpack ที่จะต้องประมวลผลทุกๆหน้า และ ค่อย serve หน้า home page กลับมา

How do Vite and Create React App work?

Vite และ CRA ไม่ได้แตกต่างกันมาก ทั้งสองทำสิ่งเดียวกันคือ ให้บริการ bundle local development server และ production แก่ผู้พัฒนา

Why use Vite?

เราได้เห็นข้อดีของ Vite มาบ้างแล้ว ตอนนี้มาดูประโยชน์ของ Vite กันดีกว่า

• Superior performance : ระหว่างการ pre-bunding process. Vite ใช้ native Es Module ในการแปลง Module จำนวนมาก เป็น Module เดียวเพื่อเพิ่มประสิทธิภาพในการ load

• Extensive plugin compatibility : Vite สามารถทำงานร่วมกับปลั๊กอิน Rollup ส่วนใหญ่ได้

• Faster updates : Vite ใช้ native Es Module

• Faster build time : Vite ใข้ pre-configured Rollup เพื่อการ build สำหรับ production. Rollup เป็น bundle ที่มีประสิทธิภาพมากกว่า webpack, ดังนั้น Vite’s จะมี build time ที่เล็กกว่า CRA และ มีขนาด output ที่เล็กลง