วิธีลดขนาด JavaScript Bundle ของคุณลง 70%
เว็บแอปพลิเคชันส่วนใหญ่ส่งโค้ดมากเกินความจำเป็น โดยเฉลี่ยแล้วหน้าเว็บหนึ่งหน้าจะโหลด JavaScript ถึง 1.7 MB แต่เหล่านักพัฒนาใช้งานโค้ดเพียงประมาณ 35% จากโค้ดทั้งหมดที่ Deploy ไปเท่านั้น
Bundle ขนาดเล็กจะช่วยปรับปรุง Core Web Vitals ของคุณให้ดีขึ้น ช่วยให้ได้คะแนน Largest Contentful Paint และ Time to Interactive ที่รวดเร็วยิ่งขึ้น
ทำตาม 10 ขั้นตอนนี้เพื่อลดขนาด bundle ของคุณ:
- Tree shaking: ลบโค้ดที่ไม่ได้ใช้งานออก ใช้ไวยากรณ์ ES Module เพื่อให้ฟีเจอร์นี้ทำงานได้
- Code splitting: แบ่งโค้ดของคุณออกเป็นส่วนย่อยๆ
- Dynamic imports: โหลดโค้ดเฉพาะเมื่อผู้ใช้ต้องการใช้งานเท่านั้น
- Image optimization: ใช้การแปลงรูปภาพผ่าน URL แทนการใช้ไลบรารีขนาดใหญ่
- Dependency auditing: เปลี่ยนจากไลบรารีที่มีขนาดใหญ่เป็นไลบรารีที่เบากว่า
- Minification: บีบอัดไฟล์โค้ดของคุณให้เล็กลง
- Compression: ใช้ Brotli เพื่อผลลัพธ์ที่ดีกว่า Gzip
- Dead code elimination: ลบส่วนของโค้ดที่ไม่สามารถเข้าถึงได้ออกไป
- Lazy loading: ชะลอการโหลดคอมโพเนนต์ที่ไม่สำคัญ
- Polyfill pruning: ส่งเฉพาะ polyfill ที่ผู้ใช้จำเป็นต้องใช้เท่านั้น
เทคนิคสามอย่างนี้จะได้ผลดีที่สุดเมื่อใช้ร่วมกัน ได้แก่ Lazy loading, polyfill pruning และ dead code elimination ซึ่งสามารถลดขนาดลงได้ถึง 15-30%
ตรวจสอบ (Audit) dependencies ของคุณก่อนที่จะติดตั้ง โดยใช้ npx bundle-phobia เพื่อเช็กขนาด
ตัวอย่างเช่น: • date-fns (13KB) ดีกว่า moment.js (67KB) • dayjs (2KB) เป็นทางเลือกที่ยอดเยี่ยมสำหรับการจัดรูปแบบวันที่ • ใช้ lodash-es แทนการใช้ไลบรารี lodash แบบเต็มชุด
ตรวจสอบความคืบหน้าของคุณด้วยเป้าหมายเหล่านี้: • ขนาด JS ทั้งหมด: ตั้งเป้าให้ต่ำกว่า 120 KB • LCP: ตั้งเป้าให้ต่ำกว่า 2.5s • TTI: ตั้งเป้าให้ต่ำกว่า 3.5s
หลีกเลี่ยงข้อผิดพลาดเหล่านี้: • การ Deploy development builds แทนที่จะเป็น production builds • การ Import ไลบรารีทั้งชุด ทั้งที่คุณต้องการใช้งานเพียงฟังก์ชันเดียว • การลืมเปิดใช้งานการบีบอัดแบบ Brotli บนเซิร์ฟเวอร์ของคุณ
หากคุณใช้ tree shaking, code splitting และ dependency auditing คุณสามารถลดขนาด payload ลงได้ถึง 50-70% ภายในหนึ่ง sprint
ที่มา: https://dev.to/kui_luo/how-to-reduce-your-javascript-bundle-size-by-70-in-10-steps-3j1g