Optimasi Performansi Build di Webpack & Vite: Code Splitting, Lazy Loading, dan Tree Shaking

Dalam pengembangan aplikasi web modern, ukuran file JavaScript yang besar sering menjadi penyebab utama lambatnya waktu muat halaman (page load time). Setiap kilobyte tambahan bisa memperlambat interaksi pertama pengguna. Di sinilah pentingnya optimasi performa build agar aplikasi tetap cepat dan efisien, tanpa mengorbankan fitur atau modularitas.

Build tools seperti Webpack dan Vite menyediakan berbagai teknik untuk mengoptimalkan hasil bundling — mulai dari code splitting, lazy loading, hingga tree shaking. Teknik-teknik ini membantu mengurangi ukuran file akhir, hanya memuat kode yang diperlukan, dan membuang kode yang tidak digunakan. Dalam artikel ini, kita akan membahas cara kerja serta implementasinya agar kamu bisa memaksimalkan performa proyek modern.

Code Splitting – Membagi Bundle Jadi Lebih Ringan

Code splitting adalah teknik memecah file JavaScript besar menjadi beberapa bagian kecil (chunk). Dengan cara ini, browser hanya akan memuat kode yang dibutuhkan untuk halaman tertentu.

a. Code Splitting di Webpack

Webpack mendukung dynamic import dengan sintaks modern:

// file: main.js
document.getElementById("btnLoad").addEventListener("click", () => {
  import("./module.js").then(module => {
    module.loadFeature();
  });
});

Saat di-build, Webpack akan membuat file terpisah untuk module.js. Kode ini baru diunduh ketika tombol diklik.

Aktifkan di konfigurasi:

module.exports = {
  mode: 'production',
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  }
};

b. Code Splitting di Vite

Vite otomatis memecah bundle berdasarkan dependency dan dynamic import.

const loadChart = async () => {
  const { renderChart } = await import('./chart.js');
  renderChart();
};

Vite akan membuat file chart.[hash].js yang hanya dimuat ketika fungsi dipanggil.

Lazy Loading – Muat Kode Hanya Saat Diperlukan

Lazy loading adalah teknik untuk menunda pemuatan modul atau komponen sampai benar-benar dibutuhkan.
Ini sangat berguna untuk halaman besar dengan banyak fitur yang jarang diakses pengguna.

a. Lazy Loading Komponen (Contoh dengan Webpack + React)

import React, { Suspense, lazy } from 'react';

const Chart = lazy(() => import('./Chart'));

function App() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<p>Memuat grafik...</p>}>
        <Chart />
      </Suspense>
    </div>
  );
}

React akan memuat komponen Chart hanya ketika dibutuhkan.

b. Lazy Loading Modul di Vite

Vite juga mendukung lazy loading native tanpa konfigurasi tambahan:

async function loadFeature() {
  const { initFeature } = await import('./feature.js');
  initFeature();
}

Dengan dukungan ES Module yang cepat, Vite memuat file ini secara efisien tanpa penundaan berarti.

Tree Shaking – Hapus Kode yang Tidak Digunakan

Tree shaking adalah proses menghapus kode JavaScript yang tidak digunakan dari hasil bundling. Teknik ini bergantung pada ES Modules (import/export) dan bekerja optimal dalam mode produksi.

a. Mengaktifkan Tree Shaking di Webpack

Pastikan mode produksi diaktifkan:

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true
  }
};

Contoh:

// utils.js
export function used() { console.log("Dipakai"); }
export function unused() { console.log("Tidak dipakai"); }

// main.js
import { used } from './utils.js';
used();

Webpack akan otomatis menghapus fungsi unused() dari hasil build.

b. Tree Shaking di Vite

Vite menggunakan Rollup di balik layar, yang secara otomatis melakukan tree shaking.
Kamu hanya perlu menulis modul menggunakan export/import standar

import { calculate } from './math.js';
calculate();

Kode yang tidak digunakan akan dihapus secara otomatis saat build untuk produksi (npm run build).

Kombinasi Ketiganya untuk Build Optimal

Menggabungkan code splitting, lazy loading, dan tree shaking akan menghasilkan build yang cepat, ringan, dan efisien:

1. Tree shaking memastikan hanya kode yang digunakan saja yang masuk ke bundle.

2. Code splitting memecah bundle besar menjadi beberapa bagian modular.

3. Lazy loading memastikan hanya kode yang dibutuhkan pengguna yang dimuat.

Contoh struktur proyek optimal:

/src
 ├─ main.js
 ├─ dashboard.js
 ├─ report.js
 └─ utils.js

main.js hanya memuat dashboard.js atau report.js secara dinamis:

document.getElementById("btnReport").addEventListener("click", async () => {
  const { showReport } = await import("./report.js");
  showReport();
});

Tips Tambahan Optimasi Build

• Gunakan mode production untuk aktivasi minifikasi dan tree shaking otomatis.

• Aktifkan cache busting dengan hash di nama file output ([name].[contenthash].js).

• Gunakan plugin seperti TerserPlugin di Webpack untuk menghapus komentar dan whitespace.

• Di Vite, gunakan vite build --minify terser untuk hasil build yang lebih kecil.

Kesimpulan

Dengan menerapkan optimasi performa build menggunakan code splitting, lazy loading, dan tree shaking, aplikasi JavaScript modern akan lebih cepat, efisien, dan ramah pengguna. Teknik ini sangat penting dalam proyek besar agar waktu muat (load time) tetap singkat tanpa mengorbankan modularitas dan maintainability.

Baik kamu menggunakan Webpack atau Vite, strategi optimasi ini merupakan pondasi dari workflow pengembangan modern yang profesional dan scalable.