Tree Shaking คือกระบวนการลบโค้ดที่ไม่ถูกใช้งานออกจากบันเดิล โดยพึ่งพา ES Modules ที่มีโครงสร้างสแตติก (import/export) เพื่อพิสูจน์การอ้างอิง ฟีเจอร์นี้มีใน Webpack, Rollup, esbuild และ Vite ช่วยลดขนาด JavaScript ส่งผลดีต่อความเร็วและ Core Web Vitals.

Tree Shaking ใน JavaScript คืออะไร? ใช้อย่างไรให้ได้ผลจริง

สรุปเร็ว หลักการคือ “นำเฉพาะสิ่งที่ใช้จริง” จากโมดูล ESM มาใส่บันเดิล และปล่อยให้มินิไฟเออร์กำจัดซากโค้ดที่เหลือ (dead code elimination) ขั้นสำคัญคือใช้ ES Modules, หลีกเลี่ยง side effects, และตั้งค่าเครื่องมือให้ถูกต้อง

ทำงานอย่างไร (ภาพรวม)

1. Static analysis ของ ESM: ตัวบันเดิลอ่าน import/export แบบสแตติก รู้ตั้งแต่ build-time ว่าอะไรถูกใช้
2. Mark as unused: export ที่ไม่ถูกอ้างอิงจะถูกทำเครื่องหมายเป็น “ไม่ได้ใช้”
3. Minifier ตัดทิ้ง: ขั้น minify (เช่น Terser/ESBuild) จะลบโค้ดที่ไม่จำเป็น

โค้ดตัวอย่างพื้นฐาน

// utils.js (ESM)
export function sum(a, b){ return a + b }
export function mul(a, b){ return a * b } // ไม่ถูกใช้

// app.js
import { sum } from './utils.js'
console.log(sum(2,3))

// ผลที่คาดหวัง: mul จะถูกสั่น (ทิ้ง) ออก ถ้าตั้งค่าถูกต้อง

ตาราง: เครื่องมือยอดนิยมและหมายเหตุการตั้งค่า

package.json: sideEffects

{
  "name": "my-app",
  "type": "module",
  "sideEffects": false,
  // ถ้ามีไฟล์ที่มีเอฟเฟกต์จริง (เช่น ใส่ global CSS) ระบุยกเว้น:
  // "sideEffects": ["*.css", "src/polyfills/**"]
}

จุดที่ทำให้ “สั่นไม่ออก” (และวิธีแก้)