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