Tujuan Pembelajaran

Bisa implementasi code splitting dengan React.lazy
Mengerti dynamic import
Bisa mengoptimasi images dan assets

Analogi

Diagram


      Loading Strategy:
├── Code Splitting -> per-route chunks
├── Lazy Loading -> muat saat dibutuhkan
├── Image Optimization -> WebP, responsive
└── Preloading -> hint browser

Jangan kirim 1MB JS untuk halaman yang cuma butuh 100KB — split dan lazy load

Penjelasan Konsep

Bayangkan restoran yang menyajikan semua hidangan sekaligus — sebagian dingin sebelum disentuh. Website juga: jangan load semua sekaligus.

Code Splitting dengan React.lazy

Pisahkan bundle berdasarkan route dengan React.lazy dan Suspense. Setiap halaman punya chunk sendiri.

Image Optimization

Images adalah penyumbang payload terbesar. Optimasi 50-80% dengan format modern (WebP, AVIF), responsive images (srcset + sizes), dan lazy loading.

Preloading

Hint browser untuk resource kritis seperti fonts dan hero images.

Inti yang Perlu Dipahami

Bagian ini berfokus pada bisa implementasi code splitting dengan React.lazy., mengerti dynamic import., dan bisa mengoptimasi images dan assets. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Optimasi Loading, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Jangan kirim 1MB JS untuk halaman yang cuma butuh 100KB — split dan lazy load. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. React.lazy + dynamic import = split point. Suspense untuk fallback UI saat loading chunk.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

// Route-based code splitting
const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  );
}

// Optimized image
<img src="/photo.webp" loading="lazy" decoding="async"
  srcSet="/photo-400.webp 400w, /photo-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px" />

Penjelasan Kode

React.lazy + dynamic import = split point. Suspense untuk fallback UI saat loading chunk.

Prompt AI

Implementasikan route-based code splitting. Analisis bundle dengan rollup-plugin-visualizer.

Pertanyaan Reflektif

Setiap route tanpa code splitting menambah initial bundle. Pantau bundle size setiap kali tambah dependency.