Audit Kinerja Web: Strategi Memangkas Bundle Size JavaScript hingga 70%

Menemukan ‘Penumpang Gelap’ di Package.json

Ketika sebuah aplikasi web bertumbuh seiring waktu, bundle JavaScript sering kali membengkak tanpa disadari oleh para pengembang. Sering kali sebuah fitur sederhana seperti format tanggal memasukkan dependensi puluhan kilobyte yang tidak diperlukan.

Langkah Taktis Optimasi

1. Ganti Library Berat dengan Solusi Modern

• Ganti moment.js (72KB) dengan fungsi bawaan Intl.DateTimeFormat native atau library ringan date-fns / dayjs.
• Hindari mengimpor seluruh paket lodash: gunakan fungsi ES6+ native atau impor modul spesifik (lodash-es/debounce).

2. Validasi Tree-Shaking pada Paket Icon

Mengimpor library icon tanpa barrel-file optimization dapat menyebabkan ribuan icon yang tidak digunakan ikut masuk ke dalam bundle:

// Hindari import barrel yang memicu load seluruh paket
// import { Clock, ArrowRight, User } from 'lucide-react';

// Sebaiknya pastikan compiler mendukung tree-shaking atau gunakan subpath import jika perlu
import Clock from 'lucide-react/dist/esm/icons/clock';

3. Dynamic Code Splitting Berbasis Rute & Interaksi

Jangan pernah memuat komponen chart analytics atau Rich Text Editor di awal jika komponen tersebut hanya dibuka ketika tombol modal diklik oleh user!