Tree Shaking คืออะไร? ความสำคัญต่อ Performance เว็บคุณ

เว็บไซต์ส่วนใหญ่โหลด JavaScript มากกว่า 50% ที่ไม่ได้ใช้งานจริง Tree shaking คือเทคนิคที่ตัดโค้ดที่ไม่ใช้ออกจาก bundle ทำให้ไฟล์เล็กลง เว็บโหลดเร็วขึ้น

Tree Shaking คืออะไร

Tree shaking เป็นกระบวนการที่ build tools (Webpack, Rollup, Vite) วิเคราะห์โค้ดและลบส่วนที่ไม่ได้ถูกใช้ (dead code) ออกจาก final bundle เหมือนเขย่าต้นไม้ ใบที่ตายจะร่วงลง เหลือแต่ส่วนที่ยังมีชีวิต

ทำไม Tree Shaking ถึงสำคัญ

ปัญหา	ก่อน Tree Shaking	หลัง Tree Shaking
Bundle Size	500 KB	200 KB (-60%)
Load Time	3.5 วินาที	1.8 วินาที
Parse Time	800ms	300ms
PageSpeed Score	55	85+

วิธีทำ Tree Shaking

1. ใช้ ES Modules

Tree shaking ทำงานได้ดีกับ ES Modules (import/export) เท่านั้น ถ้าโค้ดใช้ CommonJS (require/module.exports) tree shaking จะไม่ทำงาน ตรวจสอบว่า dependencies ที่ใช้ support ES Modules

2. Import เฉพาะที่ใช้

แทนที่จะ import ทั้ง library ให้ import เฉพาะ function ที่ใช้ เช่น import เฉพาะ debounce จาก lodash แทนที่จะ import lodash ทั้งก้อน ลดขนาดจาก 70 KB เหลือ 1 KB

3. ตั้ง sideEffects ใน package.json

บอก bundler ว่าไฟล์ไหนไม่มี side effects (ไม่เปลี่ยน global state) เพื่อให้ tree shake ได้อย่างปลอดภัย ตั้ง "sideEffects": false ใน package.json หรือระบุไฟล์ที่มี side effects เช่น CSS

4. ใช้ Bundle Analyzer

ใช้ webpack-bundle-analyzer หรือ rollup-plugin-visualizer ดูว่า bundle มีอะไรบ้าง จะเห็นว่า library ไหนใหญ่สุด และมีโค้ดที่ไม่ได้ใช้เท่าไหร่

Libraries ที่ Tree Shake ได้ดี

Library	Tree Shakeable?	หมายเหตุ
lodash-es	ได้	ใช้แทน lodash ปกติ
date-fns	ได้	ดีกว่า moment.js ที่ tree shake ไม่ได้
@headlessui/react	ได้	import เฉพาะ component ที่ใช้
moment.js	ไม่ได้	ใหญ่มาก ใช้ date-fns หรือ dayjs แทน
jQuery	ไม่ได้	monolithic ใช้ vanilla JS หรือ framework แทน

คำถามที่พบบ่อย

Tree shaking ทำอัตโนมัติไหม

Build tools อย่าง Webpack (production mode), Rollup, Vite ทำ tree shaking อัตโนมัติ แต่ต้องใช้ ES Modules และตั้ง sideEffects ให้ถูกต้อง ถ้า config ผิด tree shaking อาจไม่ทำงาน

Tree shaking ต่างจาก code splitting อย่างไร

Tree shaking ลบโค้ดที่ไม่ได้ใช้ออก ส่วน code splitting แบ่ง bundle เป็นชิ้นเล็กๆ โหลดตามความจำเป็น ทั้งสองช่วยลด initial load time แต่คนละวิธี ใช้ร่วมกันได้

เว็บ Webflow เกี่ยวกับ tree shaking ไหม

Webflow จัดการ bundling ให้อัตโนมัติ ผู้ใช้ไม่ต้องตั้ง tree shaking เอง แต่ถ้าใส่ custom code หรือ third-party scripts มาก ยังส่งผลต่อ performance ควรตรวจสอบว่าโหลดเฉพาะที่จำเป็น

ลดขนาด JavaScript ให้เว็บเร็วขึ้น

Tree shaking เป็นหนึ่งในวิธีที่ลด bundle size ได้มากที่สุด ถ้าต้องการทีมที่ช่วย optimize เว็บ ให้ performance สูง — คุยกับเรา

บทความแนะนำ

• Website Speed Optimization Tips
• แก้ไข Render-Blocking Resources
• Caching Strategy สำหรับเว็บ Traffic สูง
• Composable Architecture คืออะไร