Digital Transformation
Tree Shaking (Eliminasi Kode Mati)
TL;DR: Tree shaking adalah proses bundler modern (Webpack, Rollup, esbuild) yang mengidentifikasi fungsi atau modul tidak terpakai dan membuangnya saat build production. Hasilnya, bundle JavaScript turun 20-50%, mempercepat First Contentful Paint dan menghemat data pengguna.
Apa itu Tree Shaking?
Tree shaking adalah analisis statis di tahap bundling yang mendeteksi mana saja export dari sebuah modul yang benar-benar dipakai oleh aplikasi, lalu menghapus sisanya dari output. Nama "tree shaking" merujuk pada metafora pohon: dependency graph dianalogikan sebagai pohon, dan bundler mengguncang pohon agar daun mati (kode tidak terpakai) jatuh.
Teknik ini hanya bekerja pada modul ES (import/export) karena strukturnya statis dan dapat dianalisis tanpa menjalankan kode. Modul CommonJS (require) tidak bisa di-tree-shake karena import-nya dinamis. Tree shaking biasanya dipasangkan dengan code splitting untuk hasil maksimal.
Cara Kerja Tree Shaking
| Tahap | Yang Terjadi |
|---|---|
| Analisis | Bundler baca semua import/export di seluruh dependency graph |
| Marking | Tandai export yang ter-reach dari entry point |
| Elimination | Hapus kode yang tidak ter-reach saat minifikasi |
| Side-effect check | Cek package.json field sideEffects untuk modul yang punya efek samping (CSS import, polyfill) |
Contoh nyata: import import { debounce } from 'lodash-es' hanya membawa fungsi debounce (~2 KB), bukan seluruh library lodash (~70 KB). Library yang ditulis dengan ES modules dan tidak punya side-effect adalah yang paling tree-shake-friendly.
Praktik standar di industri: Next.js, Vite, dan Remix mengaktifkan tree shaking otomatis pada build production. Yang perlu developer perhatikan adalah memilih library ber-export granular dan menulis import bernama, bukan import wildcard.
Kenapa Penting?
Untuk audiens Indonesia yang sebagian besar pakai 4G, ukuran bundle JavaScript adalah penyebab utama LCP lambat. Bundle 300 KB membutuhkan ~2 detik di koneksi 1 Mbps; setelah tree shaking jadi 150 KB, turun ke ~1 detik. Dampaknya langsung ke Core Web Vitals dan ranking SEO.
Pertanyaan Umum
Apakah tree shaking otomatis di semua framework?
Otomatis di Next.js, Nuxt, Vite, dan Remix saat mode production. Untuk Webpack manual, perlu set mode: production dan pastikan field sideEffects: false di package.json tepat.
Kenapa bundle saya tidak mengecil meski sudah pakai ES modules?
Cek tiga hal: library yang dipakai apakah ESM (lihat field module di package.json), import-nya bernama (import { fn } bukan import * as), dan side-effect declaration di package.json benar.
Istilah Terkait