← Next.js49 / 57

Bundle Analysis & dynamic() Import

Gunakan dynamic() dari next/dynamic untuk mengunduh komponen berat (seperti library Chart/Editor) hanya saat dibutuhkan.

👀 Contoh dulu

import dynamic from "next/dynamic";
const HeavyChart = dynamic(() => import('./HeavyChart'), { ssr: false });

Hasilnya: Komponen HeavyChart dipisah dari bundle JavaScript utama.

💡 ssr: false berguna jika komponen tersebut mengakses window/DOM khusus client.

📝 Sekarang giliranmu

Gunakan fungsi dynamic yang telah diimpor untuk memuat komponen berat secara asinkron (malas). Deklarasikan konstanta HeavyComponent yang memanggil dynamic() dan memberikannya callback impor dinamis asinkron () => import('./Heavy').

Preview
← SebelumnyaBerikutnya →