Cara Menggunakan Tree Shaking di JavaScript

Cara Menggunakan Tree Shaking di JavaScript

Tree shaking adalah teknik optimasi ukuran file JavaScript dengan menghapus kode yang tidak digunakan (dead code) dari bundle final.

Fitur ini sangat penting untuk meningkatkan performa web, terutama pada aplikasi modern yang menggunakan library besar seperti React, Lodash, atau D3.js.

1. Apa Itu Tree Shaking?

  • Definisi: Tree shaking adalah proses menghapus fungsi, variabel, atau modul yang tidak pernah digunakan dari bundle JavaScript.
  • Tujuan: Mengurangi ukuran file dan meningkatkan waktu loading web.
  • Kapan efektif: Ketika menggunakan ES6 module syntax (import/export), karena module statis memungkinkan bundler menganalisis dependency.

Contoh Dead Code:

// utils.js
export function sum(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }

// main.js
import { sum } from './utils.js';
console.log(sum(2, 3));
  • multiply tidak digunakan → Tree shaking akan menghapusnya dari bundle.

2. Persyaratan Tree Shaking

  1. Gunakan ES6 Modules (import / export)
    • CommonJS (require/module.exports) tidak mendukung tree shaking sepenuhnya karena module bersifat dinamis.
  2. Gunakan bundler modern
    • Webpack 4+, Rollup, Parcel, Vite mendukung tree shaking.
  3. Mode produksi
    • Tree shaking biasanya aktif saat bundle dalam production mode karena bundler melakukan minification dan dead code elimination.

3. Menggunakan Tree Shaking dengan Webpack

3.1 Struktur Proyek

/src
  utils.js
  index.js
webpack.config.js

3.2 Contoh File utils.js

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

3.3 File index.js

import { add } from './utils.js';

console.log(add(2, 3));
  • subtract dan multiply tidak digunakan → dapat di-tree shake.

3.4 Konfigurasi webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production', // tree shaking aktif di mode production
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    usedExports: true, // menandai kode yang digunakan
  },
};

Langkah:

  1. Jalankan webpack --mode production.
  2. Periksa bundle → hanya fungsi add yang masuk.

4. Tree Shaking dengan Rollup

Rollup sangat efisien untuk library karena default sudah mendukung tree shaking.

rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es',
  },
  plugins: [resolve()],
};
  • Rollup akan otomatis menghapus fungsi yang tidak digunakan (subtract dan multiply) jika import tidak digunakan.

5. Menggunakan Library Modular

Beberapa library besar menyediakan versi modular untuk mendukung tree shaking:

  • Lodash: gunakan lodash-es bukan lodash biasa.
import { debounce } from 'lodash-es';
  • RxJS: gunakan import spesifik:
import { map } from 'rxjs/operators';

Catatan: Import default (import _ from 'lodash') akan memasukkan seluruh library → tree shaking tidak efektif.

6. Tips Memaksimalkan Tree Shaking

  1. Selalu gunakan ES6 module syntax.
  2. Gunakan bundler modern (Webpack 5, Rollup, Vite).
  3. Aktifkan production mode.
  4. Hindari side-effects pada modul:
    • Tambahkan "sideEffects": false di package.json jika modul bebas efek samping.
{
  "name": "my-app",
  "version": "1.0.0",
  "sideEffects": false
}
  1. Pisahkan kode ke modul kecil → memudahkan bundler menghapus kode yang tidak digunakan.
  2. Gunakan modular library (lodash-es, modular RxJS, modular D3).

7. Contoh Hasil Tree Shaking

Sebelum: Bundle utils.js + semua fungsi → 5KB

Sesudah: Hanya fungsi yang digunakan (add) → 2KB

  • Pengurangan signifikan → loading lebih cepat → performa web meningkat.

8. Kesimpulan

Tree shaking adalah teknik penting untuk optimasi performa front-end. Dengan tree shaking:

  • Bundle lebih kecil
  • Load lebih cepat
  • Hanya kode yang digunakan masuk ke aplikasi

Kunci sukses tree shaking:

  1. Gunakan ES6 modules.
  2. Gunakan bundler modern.
  3. Hindari side effects pada modul.
  4. Gunakan versi library yang modular.

Related Posts