Optimasi Performa JavaScript: Code Splitting vs. Lazy Evaluation

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

Dalam contoh ini, OtherComponent hanya dimuat ketika dirender. Saat sedang dimuat, pengguna akan melihat pesan "Loading...".

Alat untuk Code Splitting

• Webpack: Bundler modul populer yang mendukung berbagai teknik code splitting.
• Rollup: Bundler modul lain yang berfokus pada pembuatan bundel yang kecil dan efisien.
• Parcel: Bundler tanpa konfigurasi yang secara otomatis menangani code splitting.
• Vite: Alat build yang memanfaatkan modul ES asli untuk pengembangan cepat dan build produksi yang dioptimalkan.

Lazy Evaluation: Menunda Komputasi

Apa itu Lazy Evaluation?

Lazy evaluation, juga dikenal sebagai evaluasi tertunda, adalah teknik pemrograman di mana evaluasi suatu ekspresi ditunda sampai nilainya benar-benar dibutuhkan. Dengan kata lain, komputasi hanya dilakukan ketika hasilnya diperlukan, daripada menghitungnya secara rakus di awal.

Bayangkan Anda sedang menyiapkan makanan multi-hidangan. Anda tidak akan memasak setiap hidangan sekaligus. Sebaliknya, Anda akan menyiapkan setiap hidangan hanya saat waktunya untuk menyajikannya. Lazy evaluation bekerja dengan cara yang sama, melakukan komputasi hanya ketika hasilnya dibutuhkan.

Bagaimana Lazy Evaluation Bekerja

Di JavaScript, lazy evaluation dapat diimplementasikan menggunakan berbagai teknik:

• Fungsi: Membungkus sebuah ekspresi dalam sebuah fungsi memungkinkan Anda menunda evaluasinya sampai fungsi dipanggil.
• Generator: Generator menyediakan cara untuk membuat iterator yang menghasilkan nilai sesuai permintaan.
• Memoization: Memoization melibatkan caching hasil dari panggilan fungsi yang mahal dan mengembalikan hasil yang di-cache ketika input yang sama muncul lagi.
• Proxy: Proxy dapat digunakan untuk mencegat akses properti dan menunda komputasi nilai properti sampai mereka benar-benar diakses.

Manfaat Lazy Evaluation

• Peningkatan Performa: Dengan menunda komputasi yang tidak perlu, lazy evaluation dapat secara signifikan meningkatkan performa, terutama saat berurusan dengan kumpulan data besar atau perhitungan kompleks.
• Pengurangan Penggunaan Memori: Lazy evaluation dapat mengurangi penggunaan memori dengan menghindari pembuatan nilai perantara yang tidak segera dibutuhkan.
• Peningkatan Responsivitas: Dengan menghindari komputasi yang tidak perlu selama muat awal, lazy evaluation dapat meningkatkan responsivitas aplikasi.
• Struktur Data Tak Terbatas: Lazy evaluation memungkinkan Anda bekerja dengan struktur data tak terbatas, seperti daftar atau aliran tak terbatas, dengan hanya menghitung elemen yang diperlukan sesuai permintaan.

Contoh: Lazy Loading Gambar

Kasus penggunaan umum untuk lazy evaluation adalah lazy loading gambar. Alih-alih memuat semua gambar di halaman di awal, Anda dapat menunda pemuatan gambar yang tidak terlihat di viewport. Hal ini dapat secara signifikan meningkatkan waktu muat halaman awal dan mengurangi konsumsi bandwidth jaringan.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Contoh ini menggunakan API IntersectionObserver untuk mendeteksi kapan sebuah gambar memasuki viewport. Ketika gambar terlihat, atribut src-nya diatur ke nilai atribut data-src-nya, memicu gambar untuk dimuat. Observer kemudian berhenti mengamati gambar untuk mencegahnya dimuat lagi.

Contoh: Memoization

Memoization dapat digunakan untuk mengoptimalkan panggilan fungsi yang mahal. Berikut contohnya:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulasikan perhitungan yang memakan waktu
  for (let i = 0; i < 100000000; i++) {
    // Lakukan sesuatu
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('First call');
console.log(memoizedCalculation(5)); // Panggilan pertama - membutuhkan waktu
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedCalculation(5)); // Panggilan kedua - mengembalikan nilai yang di-cache secara instan
console.timeEnd('Second call');

Dalam contoh ini, fungsi memoize menerima sebuah fungsi sebagai input dan mengembalikan versi memoized dari fungsi tersebut. Fungsi memoized menyimpan hasil dari panggilan sebelumnya, sehingga panggilan berikutnya dengan argumen yang sama dapat mengembalikan hasil yang di-cache tanpa mengeksekusi ulang fungsi asli.

Code Splitting vs. Lazy Evaluation: Perbedaan Kunci

Meskipun code splitting dan lazy evaluation keduanya adalah teknik optimasi yang ampuh, keduanya menangani aspek performa yang berbeda:

• Code Splitting: Berfokus pada pengurangan ukuran bundel awal dengan membagi kode menjadi bagian-bagian yang lebih kecil dan memuatnya sesuai permintaan. Ini terutama digunakan untuk meningkatkan waktu muat halaman awal.
• Lazy Evaluation: Berfokus pada penundaan komputasi nilai sampai benar-benar dibutuhkan. Ini terutama digunakan untuk meningkatkan performa saat berurusan dengan komputasi yang mahal atau kumpulan data besar.

Pada intinya, code splitting mengurangi jumlah kode yang perlu diunduh di awal, sementara lazy evaluation mengurangi jumlah komputasi yang perlu dilakukan di awal.

Kapan Menggunakan Code Splitting vs. Lazy Evaluation

Code Splitting

• Aplikasi Besar: Gunakan code splitting untuk aplikasi dengan jumlah kode JavaScript yang besar, terutama yang memiliki banyak rute atau fitur.
• Peningkatan Waktu Muat Awal: Gunakan code splitting untuk meningkatkan waktu muat halaman awal dan mengurangi waktu interaktif.
• Pengurangan Bandwidth Jaringan: Gunakan code splitting untuk mengurangi jumlah data yang perlu ditransfer melalui jaringan.

Lazy Evaluation

• Komputasi Mahal: Gunakan lazy evaluation untuk fungsi yang melakukan komputasi mahal atau mengakses kumpulan data besar.
• Peningkatan Responsivitas: Gunakan lazy evaluation untuk meningkatkan responsivitas aplikasi dengan menunda komputasi yang tidak perlu selama muat awal.
• Struktur Data Tak Terbatas: Gunakan lazy evaluation saat bekerja dengan struktur data tak terbatas, seperti daftar atau aliran tak terbatas.
• Lazy Loading Media: Terapkan lazy loading untuk gambar, video, dan aset media lainnya untuk meningkatkan waktu muat halaman.

Menggabungkan Code Splitting dan Lazy Evaluation

Dalam banyak kasus, code splitting dan lazy evaluation dapat digabungkan untuk mencapai peningkatan performa yang lebih besar lagi. Misalnya, Anda dapat menggunakan code splitting untuk membagi aplikasi Anda menjadi bagian-bagian yang lebih kecil dan kemudian menggunakan lazy evaluation untuk menunda komputasi nilai dalam bagian-bagian tersebut.

Pertimbangkan aplikasi e-commerce. Anda dapat menggunakan code splitting untuk membagi aplikasi menjadi bundel terpisah untuk halaman daftar produk, halaman detail produk, dan halaman checkout. Kemudian, di dalam halaman detail produk, Anda dapat menggunakan lazy evaluation untuk menunda pemuatan gambar atau komputasi rekomendasi produk sampai benar-benar dibutuhkan.

Di Luar Code Splitting dan Lazy Evaluation: Teknik Optimasi Tambahan

Meskipun code splitting dan lazy evaluation adalah teknik yang ampuh, keduanya hanyalah dua bagian dari teka-teki saat melakukan optimasi performa JavaScript. Berikut adalah beberapa teknik tambahan yang dapat Anda gunakan untuk lebih meningkatkan performa:

• Minifikasi: Hapus karakter yang tidak perlu (misalnya, spasi kosong, komentar) dari kode Anda untuk mengurangi ukurannya.
• Kompresi: Kompresi kode Anda menggunakan alat seperti Gzip atau Brotli untuk lebih mengurangi ukurannya.
• Caching: Manfaatkan cache browser dan cache CDN untuk mengurangi jumlah permintaan ke server Anda.
• Tree Shaking: Hapus kode yang tidak terpakai dari bundel Anda untuk mengurangi ukurannya.
• Optimasi Gambar: Optimalkan gambar dengan mengompresinya, mengubah ukurannya sesuai dimensi yang tepat, dan menggunakan format gambar modern seperti WebP.
• Debouncing dan Throttling: Kontrol laju eksekusi handler peristiwa untuk mencegah masalah performa.
• Manipulasi DOM yang Efisien: Minimalkan manipulasi DOM dan gunakan teknik manipulasi DOM yang efisien.
• Web Workers: Offload tugas yang intensif secara komputasi ke web worker untuk mencegahnya memblokir thread utama.

Kesimpulan

Optimasi performa JavaScript adalah aspek penting dalam memberikan pengalaman pengguna yang positif dan mencapai tujuan bisnis. Code splitting dan lazy evaluation adalah dua teknik ampuh yang dapat secara signifikan meningkatkan performa dengan mengurangi waktu muat awal, mengurangi konsumsi bandwidth jaringan, dan menunda komputasi yang tidak perlu. Dengan memahami cara kerja teknik ini dan kapan menggunakannya, Anda dapat menciptakan aplikasi web yang lebih cepat, lebih responsif, dan lebih menyenangkan.

Ingatlah untuk mempertimbangkan persyaratan spesifik aplikasi Anda dan gunakan teknik yang paling sesuai untuk kebutuhan Anda. Terus pantau performa aplikasi Anda dan lakukan iterasi pada strategi optimasi Anda untuk memastikan bahwa Anda memberikan pengalaman pengguna terbaik. Rangkullah kekuatan code splitting dan lazy evaluation untuk menciptakan aplikasi web yang tidak hanya kaya fitur, tetapi juga berkinerja tinggi dan menyenangkan untuk digunakan, di seluruh dunia.

Sumber Belajar Lebih Lanjut

• Dokumentasi Webpack: https://webpack.js.org/
• Dokumentasi Rollup: https://rollupjs.org/guide/en/
• Dokumentasi Vite: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Optimizing JavaScript Execution: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/