วิธีลดขนาด JavaScript Bundle ลง 70%

แอปเว็บส่วนใหญ่ส่งโค้ดมากเกินไป โดยเฉลี่ยแล้วหนึ่งหน้าเว็บจะโหลด JavaScript ถึง 1.7 MB แต่นักพัฒนาใช้งานโค้ดเพียง 35% จากโค้ดทั้งหมดที่ส่งออกไปเท่านั้น

Bundle ที่มีขนาดเล็กลงจะช่วยเพิ่มความเร็วให้กับคุณ ช่วยปรับปรุงค่า Largest Contentful Paint และ Time to Interactive ให้ดีขึ้น

ทำตาม 10 ขั้นตอนนี้เพื่อลดขนาดโค้ดของคุณ

  1. Tree shaking ลบ exports ที่ไม่ได้ใช้งานออก ใช้ไวยากรณ์แบบ ES Module และเพิ่ม "sideEffects": false ลงใน package.json วิธีนี้จะช่วยลบโค้ดที่ไม่ได้ใช้งานออกไปได้ประมาณ 18%

  2. Code splitting แบ่งโค้ดของคุณออกเป็นส่วนย่อยๆ (chunks) ที่เล็กลง

  3. Dynamic imports โหลดโค้ดเฉพาะเมื่อผู้ใช้ต้องการเท่านั้น ใช้ lazy loading สำหรับ routes ซึ่งสามารถลดขนาด initial bundle ได้ถึง 28%

  4. Image optimization ใช้การแปลงรูปภาพผ่าน URL จาก CDN และเลิกใช้ inline SVGs ที่มีขนาดใหญ่

  5. Dependency auditing ตรวจสอบขนาดของ package ด้วย npx bundle-phobia • ใช้ date-fns (13KB) แทน moment.js (67KB) • ใช้ lodash-es แทน lodash • ใช้ dayjs (2KB) สำหรับการจัดการวันที่แบบง่ายๆ

  6. Minification ลบช่องว่างและตัวอักษรส่วนเกินออก ซึ่ง bundler ส่วนใหญ่จะทำขั้นตอนนี้ให้โดยอัตโนมัติ

  7. Compression ใช้ Brotli แทน Gzip เพราะ Brotli สามารถบีบอัดไฟล์ได้ดีกว่าถึง 15% ถึง 25%

  8. Dead code elimination ลบโค้ดที่คอมพิวเตอร์ไม่มีทางเข้าถึงได้ออกไป

  9. Lazy loading components ชะลอการโหลดส่วนต่างๆ ของหน้าเว็บที่อยู่ด้านล่าง (below the fold)

  10. Polyfill pruning ใช้ @babel/preset-env และส่งเฉพาะ polyfills สำหรับเบราว์เซอร์ที่ผู้ใช้ของคุณใช้งานจริงเท่านั้น

หยุดทำความผิดพลาดเหล่านี้:

  • การส่ง development builds ไปใช้งาน ให้ใช้ NODE_ENV=production เสมอ
  • การ import ไลบรารีทั้งชุด ให้เปลี่ยนมา import เฉพาะฟังก์ชันที่จำเป็นแทน
  • การข้ามขั้นตอนการวิเคราะห์ ให้ใช้ webpack-bundle-analyzer เพื่อดูว่า chunk ไหนที่มีขนาดใหญ่
  • การลืมทำ compression ไฟล์ที่ไม่ได้บีบอัดจะมีขนาดใหญ่กว่าไฟล์ที่ใช้ Brotli ถึง 5 เท่า

ติดตามความคืบหน้าของคุณด้วยเป้าหมายเหล่านี้:

  • ขนาด JS ทั้งหมด: ต่ำกว่า 120 KB
  • LCP: ต่ำกว่า 2.5s
  • TTI: ต่ำกว่า 3.5s

ให้ความสำคัญกับ tree shaking, code splitting และการ auditing เป็นอันดับแรก ซึ่งทั้งสามขั้นตอนนี้มักจะช่วยลดขนาดโค้ดได้ถึง 50% ถึง 70% ภายในหนึ่ง sprint

แหล่งที่มา: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g