อธิบายเรื่อง JavaScript Bundling
คุณเขียนแอป React หรือ Angular โดยใช้ไฟล์จำนวนมาก คุณมีการใช้ components, services และ libraries ต่างๆ
เบราว์เซอร์จะทำงานลำบากเมื่อต้องจัดการกับไฟล์จำนวนมาก การโหลดไฟล์ 200 ไฟล์หมายถึงการส่ง network requests ถึง 200 ครั้ง ซึ่งจะทำให้แอปของคุณทำงานช้าลง
Bundlers คือตัวช่วยแก้ปัญหานี้ โดยจะนำโค้ดและส่วนที่ import มาวมกันให้กลายเป็นไฟล์เดียวหรือไฟล์ขนาดเล็กเพียงไม่กี่ไฟล์ ซึ่งช่วยให้การโหลดมีประสิทธิภาพมากขึ้น
Bundlers สมัยใหม่ทำได้มากกว่าแค่การรวมไฟล์ โดยพวกมันจะทำหน้าที่ดังนี้:
- Minification: การลบช่องว่างและคอมเมนต์ออก รวมถึงการย่อชื่อตัวแปรให้สั้นลงเพื่อประหยัดพื้นที่
- Tree shaking: การลบโค้ดที่คุณไม่ได้ใช้งานออกไป
- Code splitting: การแบ่งโค้ดออกเป็นส่วนย่อยๆ (chunks) เพื่อให้ผู้ใช้โหลดเฉพาะสิ่งที่จำเป็นต้องใช้เท่านั้น
ไฟล์ที่มีขนาดเล็กลงจะช่วยให้แอปทำงานได้เร็วขึ้น
เครื่องมือหลักที่มีให้เลือกใช้มีสองอย่างคือ: Webpack และ Vite
Webpack จะทำการ bundle แอปทั้งหมดของคุณก่อนที่จะนำไปใช้งาน มันมีประสิทธิภาพสูงและยืดหยุ่น แต่อาจจะรู้สึกช้าในโปรเจกต์ขนาดใหญ่ เพราะมันต้องทำการ rebundle ทุกอย่างใหม่เมื่อมีการเปลี่ยนแปลง
Vite เป็นตัวเลือกที่ทันสมัยกว่า โดยจะส่งไฟล์โดยตรงในระหว่างการพัฒนา (development) ผ่าน native ES modules และจะอัปเดตเฉพาะไฟล์ที่คุณแก้ไขเท่านั้น ทำให้การอัปเดตเกิดขึ้นได้ทันที
การเปรียบเทียบ:
Webpack:
- ความเร็วในการพัฒนา: ช้ากว่า
- การตั้งค่า: ซับซ้อน
- เหมาะสำหรับ: โปรเจกต์เก่าขนาดใหญ่ (legacy projects)
Vite:
- ความเร็วในการพัฒนา: เร็ว
- การตั้งค่า: ง่าย
- เหมาะสำหรับ: โปรเจกต์ใหม่ที่ทันสมัย
แนะนำให้ใช้ Vite สำหรับโปรเจกต์ใหม่
Bundler ทุกตัวมีขั้นตอนการทำงาน 3 ขั้นตอนดังนี้:
- สร้าง dependency graph: Bundler จะสร้างแผนผังความเชื่อมโยงระหว่างไฟล์ต่างๆ
- แปลงโค้ด (Transform code): แปลง TypeScript หรือ JSX ให้กลายเป็น JavaScript ปกติ
- ส่งออก bundle (Output the bundle): เขียนไฟล์สุดท้ายลงในโฟลเดอร์เพื่อนำไปใช้งาน (deployment)
รักษา bundle ให้มีขนาดเล็กและคล่องตัวด้วยเคล็ดลับเหล่านี้:
- Lazy loading: โหลด components เฉพาะเมื่อผู้ใช้ต้องการใช้งานเท่านั้น
- Specific imports: อย่า import ไลบรารีมาทั้งชุด ให้เลือก import เฉพาะฟังก์ชันที่คุณใช้งานจริงเท่านั้น
- วิเคราะห์ bundle ของคุณ: ใช้เครื่องมือต่างๆ เพื่อดูว่าไฟล์ไหนใช้พื้นที่มากที่สุด
- ใช้ production builds: ให้ deploy ด้วย production builds เสมอ แทนที่จะใช้ development builds
Bundlers ช่วยให้แอปของคุณเร็วขึ้นโดยการลดจำนวนไฟล์และทำให้ไฟล์มีขนาดเล็กลง
แหล่งที่มา: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p