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/**"]
}

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

ตัวอย่างตั้งค่าอย่างย่อ

Webpack

// webpack.config.js
module.exports = {
  mode: "production",
  optimization: {
    usedExports: true,
    concatenateModules: true
  }
};

ESBuild (CLI)

esbuild src/app.js --bundle --format=esm --minify --outfile=dist/app.js

Vite

// vite.config.js (ค่าเริ่มต้นก็ดีอยู่แล้ว)
export default {
  build: {
    target: "es2019", // ให้มินิฟายเออร์ทำงานเต็มที่
    rollupOptions: { /* ปรับเมื่อจำเป็น */ }
  }
}

เช็กลิสต์ “ทำแล้วได้ผลจริง”

• ใช้ ESM เป็นหลัก (import/export) และเลี่ยง require()
• ตั้ง sideEffects ใน package.json ให้ถูกต้องและใส่ไวท์ลิสต์ไฟล์ที่มีเอฟเฟกต์จริง
• หลีกเลี่ยง export * แบบครอบจักรวาล ใช้การ export แบบเจาะจง
• เปิดโหมดโปรดักชัน/มินิฟาย และใช้คอมเมนต์ /*#__PURE__*/ เมื่อเหมาะสม
• วัดผลด้วย bundle analyzer และตรวจขนาดไฟล์ก่อน–หลัง

บริการที่เกี่ยวข้อง (Internal Links)

• ปรับปรุงเว็บให้เร็ว/คอนเวิร์ตสูง
• ออกแบบ/พัฒนา Webflow
• บริการ UX/UI Design
• บริการทั้งหมด

อ่านต่อ (บทความที่เกี่ยวข้อง)

• Critical CSS คืออะไร
• UX/UI บน Webflow ที่คอนเวิร์ต
• Server-side Tracking คืออะไร

อ้างอิงภายนอก (เอกสารทางการ/มาตรฐาน)

• MDN — ECMAScript modules: developer.mozilla.org
• Webpack — Tree Shaking Guide: webpack.js.org
• Rollup — Tree-shaking: rollupjs.org
• esbuild — Tree Shaking: esbuild.github.io
• Vite — Build & Rollup notes: vitejs.dev
• Google web.dev — Reduce JavaScript payloads: web.dev
• Terser — Compress options (pure funcs/side_effects): terser.org

เกี่ยวกับผู้เขียน

Vision X Brain ทีม Website/SEO/CRO & Web Performance เราช่วยจัดระเบียบโค้ด เร่งความเร็ว และลด JS payload ให้ผ่าน Core Web Vitals อย่างยั่งยืน สนใจเริ่มจาก Audit 14 วัน ดู บริการ Website Renovation

อัปเดตล่าสุด: 21 Aug 2025