Belajar Svelte - Performance Optimization

#Pendahuluan

Optimasi tanpa pengukuran hanyalah dugaan. Sebelum mengejar mikro-optimasi, penting untuk tahu di mana waktu benar-benar terbuang — apakah di bundle yang gemuk, di render yang berat, atau di request yang lambat.

Episode ini membahas profiling dengan alat browser dan benchmark, meminimalkan bundle dengan tree-shaking, mengurangi runtime overhead dan biaya reaktivitas, serta lazy loading komponen dan code splitting.

Setelah selesai, kalian punya alur kerja yang jelas: ukur, temukan masalah terbesar, perbaiki, dan ukur lagi. Optimasi menjadi proses berulang yang terukur, bukan kegiatan memindahkan masalah tanpa arah.

Satu prinsip mendasari seluruh episode ini: ukur pengaruh perubahan setelah selesai, bukan hanya saat mulai. Angka sebelum dan sesudah adalah satu-satunya bukti bahwa optimasi benar-benar berhasil.

#Profiling dan Benchmark

#Mulai dari Panel Performance

Chrome DevTools menyediakan panel Performance untuk merekam aktivitas saat halaman berjalan. Hasil rekaman menunjukkan di mana CPU terpakai: fungsi yang lambat, layout yang mahal, dan paint yang tersendat. Mulailah dari langkah yang paling sering digunakan pengguna.

Tingkatkan kualitas rekaman dengan mengatur CPU throttling di panel Performance untuk mensimulasikan perangkat kelas menengah. Optimasi yang terlihat di laptop developer belum tentu terasa di perangkat pengguna.

#Benchmark dengan Lighthouse

Lighthouse memberi skor terukur untuk performa, aksesibilitas, dan SEO. Jalankan secara rutin di CI agar regresi terdeteksi sejak dini. Skor bukan tujuan akhir, tapi kompas arah perbaikan.

#Meminimalkan Bundle dengan Tree-shaking

#Visualisasikan Ukuran Bundle

Sulit mengoptimalkan sesuatu yang tidak terlihat. vite-bundle-visualizer menghasilkan peta interaktif ukuran tiap modul:

npm install -D vite-bundle-visualizer
npx vite-bundle-visualizer

Hasilnya adalah grafik treemap yang memperlihatkan librari terbesar. Target biasanya satu atau dua modul raksasa — bukan banyak modul kecil.

#Tree-shaking yang Efektif

Tree-shaking menghapus kode yang tidak terpakai saat build. Agar berfungsi, gunakan named import alih-alih mengimpor seluruh librari. Misalnya import { writable } from "svelte/store" jauh lebih ramah daripada impor yang menyeret seluruh modul. Pastikan juga librari yang dipakai mendeklarasikan sideEffects yang benar di package.json.

Periksa juga apakah librari yang dipakai sudah memanfaatkan ekspor ES module. Build modern membutuhkan format tersebut agar bundler bisa memotong bagian yang tidak terpakai secara aman.

#Mengurangi Runtime Overhead dan Biaya Reaktivitas

#Reaktivitas dengan Bijak

Svelte mengubah deklarasi reaktif menjadi kode update yang presisi. Semakin banyak hal yang dijadikan reaktif, semakin banyak pekerjaan yang harus dilacak kompiler. Batasi statement $: hanya pada nilai yang benar-benar menurun dari sumbernya:

Statement reaktif yang hemat

let query = ""
let hasil = []
 
$: if (query.length >= 3) {
  hasil = cari(query)
}

Statement reaktif ini hanya menjalankan cari(query) saat query berubah dan hanya jika panjangnya cukup. Kompiler Svelte menghasilkan kode yang membandingkan nilai sebelum menandai perubahan, sehingga update yang tidak mengubah hasil tidak menyentuh DOM.

Hati-hati dengan pembaruan massal saat data berubah. Jika sebuah statement memicu banyak update berturut-turut, pertimbangkan menunda perhitungan sampai data selesai berubah.

#Kurangi Alokasi Objek di Loop

Di dalam {#each}, hindari membuat objek atau array baru setiap iterasi. Objek baru memaksa reaktivitas membandingkan nilai baru setiap kali, sekaligus menambah beban garbage collector. Buat data statis di luar template atau di nilai yang sudah dihitung sekali.

Pola yang sama berlaku untuk fungsi yang dipanggil di template. Fungsi yang mengalokasikan objek baru setiap render akan dijalankan ulang pada tiap update yang berpotensi.

#Lazy Loading dan Code Splitting

#Dynamic Import untuk Komponen Berat

Komponen editor, chart, atau pemutar video tidak perlu dimuat di halaman pertama. Import dinamis membagi kode dan memuat modul hanya saat dibutuhkan:

<script>
  let Editor = null
 
  import("$lib/components/Editor.svelte").then((mod) => {
    Editor = mod.default
  })
</script>
 
{#if Editor}
  <svelte:component this={Editor} />
{/if}

import("$lib/components/Editor.svelte") menghasilkan chunk terpisah yang diunduh setelah halaman utama selesai dimuat. Sisanya berjalan tanpa menunggu komponen berat — persepsi kecepatan naik meski total byte yang diunduh serupa.

Gunakan ambang batas yang masuk akal. Jangan memecah komponen kecil menjadi puluhan chunk — terlalu banyak request kecil justru memperlambat. Pecah hanya yang berat dan jarang dipakai.

#Gunakan Block Await untuk Data Berat

SvelteKit mendukung menunggu data paralel di dalam load function. Komponen yang bergantung pada data berat juga bisa dirender kondisional dengan block {#await} agar konten pertama tampil lebih cepat.

#Penutup

Inti yang harus dibawa pulang:

• Ukur dulu dengan Panel Performance dan Lighthouse sebelum mengoptimalkan.
• Pakai vite-bundle-visualizer untuk menemukan modul terbesar.
• Named import dan deklarasi sideEffects yang benar mendukung tree-shaking.
• Batasi statement reaktif hanya pada nilai yang benar-benar berubah.
• Hindari alokasi objek baru di dalam loop {#each}.
• Gunakan dynamic import untuk memecah komponen berat menjadi chunk terpisah.

Di episode 16 selanjutnya kalian akan belajar testing & quality — unit testing dengan Vitest dan Svelte Testing Library, integration testing untuk aplikasi SvelteKit, E2E testing dengan Playwright, serta static analysis, linting, dan type checking. Kode yang sudah dioptimalkan harus dijamin tetap benar lewat pengujian otomatis.