Advanced · Level 14: PerformanceAdvanced65 menitBahasa Indonesia

Dynamic Imports

Memuat component atau library berat hanya setelah user membutuhkan behavior yang bergantung padanya.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan static import dari import yang dipicu action user
Memakai import() untuk library client-side yang non-kritis
Menjaga feedback UI saat dependency sedang dimuat
Menilai trade-off sebelum menunda feature

Dynamic ImportsJavaScriptNext.jsDependencies

Isi lesson

6 blok

1.
Dependency dapat menunggu ketika behavior-nya juga menungguBelum selesaiWajib
2.
Muat library pencarian setelah learner mengetikBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Dynamic import bukan pengganti desain interactionBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Dependency dapat menunggu ketika behavior-nya juga menunggu

Wajib

Static import membuat dependency menjadi bagian dari code yang harus tersedia saat module dimuat. Dynamic import melalui import() memberi pilihan untuk memuat library ketika action user benar-benar memerlukannya. Contoh yang masuk akal adalah fuzzy search yang baru dipakai setelah learner mulai mengetik, editor tambahan yang dibuka dari button, atau parser besar untuk import file. Ini bukan pattern untuk menyembunyikan biaya tanpa UX. User perlu tahu ketika feature sedang disiapkan, hasil action harus tetap benar, dan dependency harus sudah tersedia di project lokal. Jangan menunda code yang dibutuhkan untuk content atau interaction utama hanya demi mengecilkan angka awal.

Bagian ini memengaruhi progres lesson.

Muat library pencarian setelah learner mengetik

Wajib

tsx

"use client";

import { useState } from "react";

const courses = ["React Fundamentals", "Testing UI", "Next.js App Router"];

export default function CourseSearch() {
  const [results, setResults] = useState<string[]>([]);

  async function handleSearch(query: string) {
    const Fuse = (await import("fuse.js")).default;
    const fuse = new Fuse(courses);

    setResults(fuse.search(query).map((result) => result.item));
  }

  return (
    <label>
      Cari course
      <input onChange={(event) => void handleSearch(event.target.value)} />
      <p>{results.length} hasil</p>
    </label>
  );
}

Fuse baru dimuat ketika learner mulai menggunakan search. Pada local project, package harus sudah dipasang dan hasil pencarian perlu diuji dengan input nyata. Bila search adalah bagian utama yang dibutuhkan sejak route terbuka, menunda library dapat memperburuk interaction awal. Pilih berdasarkan journey, bukan karena dynamic import selalu terlihat lebih canggih.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Load course search library on demand

Muat Fuse hanya ketika learner mulai mencari course, bukan sebagai static import pada initial component.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

8 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan import() untuk library pencarian paling masuk akal?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Dynamic import bukan pengganti desain interaction

Membuat import asynchronous berarti kamu menambah state menunggu serta kemungkinan error. Pastikan user tidak kehilangan input, tidak melihat hasil lama yang menyesatkan, dan mendapat feedback yang tepat. Untuk feature kecil yang sudah dibutuhkan segera, static import dapat lebih sederhana dan lebih baik.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Dynamic import memuat code saat behavior membutuhkannya, bukan selalu saat route pertama dibuka.
Library on-demand harus tetap terpasang dan diuji di local project.
Feedback, state menunggu, dan hasil action adalah bagian dari kualitas feature.
Jangan menunda code yang penting untuk content atau interaction awal.
Berikutnya, Uji Kompetensi menggabungkan keputusan image, font, bundle, split, dan import menjadi satu rekomendasi yang dapat dijelaskan.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Dependency dapat menunggu ketika behavior-nya juga menunggu.

Memuat progres Review module