Digital Transformation
Dynamic Import
TL;DR: Dynamic Import adalah cara memuat modul JavaScript hanya saat dibutuhkan, bukan di awal. Sintaks standar ES2020 pakai
import()yang return Promise. Dampak utamanya bundle awal lebih ringan, LCP dan INP membaik, terutama untuk halaman yang punya fitur berat namun jarang dipakai.
Apa itu Dynamic Import?
Dynamic Import adalah sintaks JavaScript modern yang memungkinkan modul dimuat secara asinkron pada saat runtime, bukan di awal saat parser membaca file. Berbeda dari import statis yang menumpuk semua dependensi di bundle utama, dynamic import memecah bundle menjadi chunk terpisah yang baru di-fetch ketika kode tersebut benar-benar dijalankan. Hasilnya halaman pertama yang dilihat pengguna jauh lebih ringan, sangat penting untuk metrik LCP dan INP.
Bayangkan toko online yang punya modal verifikasi alamat lengkap dengan peta interaktif. Modul peta beratnya sekitar 250 KB. Tanpa dynamic import, modul ini ikut diunduh setiap pengunjung beranda meski cuma 8 persen yang lanjut ke checkout. Dengan dynamic import, modul peta baru diunduh saat pengguna klik tombol pilih alamat.
Cara Kerja di Framework Modern
Next.js, Nuxt, dan SvelteKit punya wrapper resmi untuk dynamic import yang otomatis menangani SSR fallback dan loading state. Berikut perbandingan implementasi umum:
| Framework | Sintaks Umum | Catatan |
|---|---|---|
| Next.js | dynamic(() => import('./Chart')) | Bisa nonaktifkan SSR dengan { ssr: false } |
| React murni | React.lazy(() => import('./Chart')) | Wajib dibungkus <Suspense> |
| Vue 3 | defineAsyncComponent(() => import('./Chart')) | Support error handler bawaan |
Pemecahan chunk otomatis dilakukan oleh bundler seperti Webpack, Vite, atau Turbopack. Hasilnya dapat dilihat di output build dengan ekstensi .chunk.js atau hash unik.
Kenapa Penting untuk Marketer?
Dynamic import bukan hanya urusan developer. Marketer Indonesia yang serius mengejar Core Web Vitals wajib paham konsep ini karena bundle size adalah penyebab nomor satu LCP lambat di koneksi 4G. Berdasarkan data Google CrUX 2025, sekitar 38 persen halaman e-commerce Indonesia gagal LCP karena bundle JS di atas 350 KB. Dengan diskusi dynamic import bersama developer, marketer bisa menjustifikasi mana fitur yang layak dimuat di awal dan mana yang bisa ditunda.
Pertanyaan Umum
Apakah Dynamic Import sama dengan Lazy Loading?
Tidak persis sama. Lazy loading lebih luas, mencakup gambar, iframe, dan modul. Dynamic import spesifik untuk modul JavaScript dengan sintaks import().
Apa risikonya jika dipakai untuk komponen utama?
Komponen utama yang dipakai di setiap halaman tidak cocok di-dynamic-import. Justru akan menambah waterfall request dan memperlambat tampilan. Praktik standar: pakai dynamic import hanya untuk modul di bawah fold atau yang dipakai kurang dari 50 persen pengunjung.
Istilah Terkait