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:

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

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

Kemudian, di file lain, Anda hanya mengimpor fungsiA:

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.