# Apa Itu Tree-Shaking? Teknik Optimasi untuk Mengurangi Ukuran Bundel dan Meningkatkan Performa Aplikasi

**Tree-shaking** adalah teknik optimasi dalam pengembangan perangkat lunak, terutama pada bundler JavaScript seperti Webpack, Rollup, atau Parcel, yang digunakan untuk menghilangkan kode yang tidak terpakai (dead code) dalam aplikasi web.

**Prinsip dasar tree-shaking:**

* Ketika kode JavaScript di-bundle untuk aplikasi web, kadang-kadang ada bagian kode yang tidak digunakan, seperti fungsi atau variabel yang tidak pernah dipanggil atau diimpor.
    
* **Tree-shaking** "mengguncang pohon" kode sumber dan menghapus semua bagian yang tidak digunakan, sehingga hanya kode yang relevan yang akan dimasukkan dalam bundel akhir.
    

### **Bagaimana Tree-Shaking Bekerja?**

1. **Mengidentifikasi Kode yang Tidak Terpakai**  
    Tree-shaking memanfaatkan **ES Modules** yang mendukung struktur statis (misalnya, `import` dan `export`). Struktur statis ini memungkinkan alat bundler untuk mengetahui kode mana yang tidak pernah dipanggil atau diimpor dan menghapusnya.
    
2. **Mengoptimalkan Ukuran Bundel**  
    Dengan menghapus kode yang tidak digunakan, ukuran bundel aplikasi jadi lebih kecil, yang mempercepat waktu muat (load) dan meningkatkan performa.
    

### **Contoh:**

Misalkan Anda memiliki dua fungsi di modul Anda, tetapi hanya satu yang digunakan dalam aplikasi:

```javascript
// utils.js
export function fungsiA() {
  console.log("Fungsi A");
}

export function fungsiB() {
  console.log("Fungsi B");
}
```

Kemudian, di file lain, Anda hanya mengimpor `fungsiA`:

```javascript
import { fungsiA } from './utils';

// Hanya fungsiA yang digunakan
fungsiA();
```

Dengan tree-shaking, **fungsiB** yang tidak digunakan akan dihapus saat proses bundling, sehingga bundel akhir tidak akan menyertakan kode `fungsiB`, mengurangi ukuran bundel.

### **Keuntungan Tree-Shaking:**

1. **Ukuran Bundel Lebih Kecil**  
    Mengurangi ukuran file JavaScript yang harus diunduh oleh pengguna, yang meningkatkan kecepatan muat halaman.
    
2. **Peningkatan Performa**  
    Mengurangi waktu parsing dan eksekusi kode, yang mempercepat aplikasi di sisi klien.
    

### **Persyaratan untuk Tree-Shaking:**

* **ES Modules** (bukan CommonJS) diperlukan karena tree-shaking bekerja lebih efektif dengan struktur `import`/`export` yang statis.
    
* Anda memerlukan alat bundler yang mendukung tree-shaking, seperti Webpack atau Rollup, yang dapat menganalisis dependensi dan menghilangkan kode yang tidak terpakai.