Tujuan Pembelajaran

Memahami cara mengoptimasi JavaScript bundle
Bisa mengimplementasikan code splitting dan lazy loading

Analogi

Diagram


      Bundle = Koper Perjalanan:

Tanpa Optimasi:
[Koper besar] → Semua pakaian (musim panas + dingin + hujan)

Dengan Optimasi:
[Koper kecil] → Pakaian yang perlu saja
[Sisa] → Kirim nanti kalau dibutuhkan

Optimasi bundle seperti packing — bawa hanya yang perlu

Penjelasan Konsep

JavaScript Bundle

JavaScript Bundle adalah file JS hasil compile semua kode aplikasi. Semakin besar bundle, semakin lambat website loading-nya.

Teknik Optimasi

Code Splitting

Pecah bundle menjadi chunk yang lebih kecil. User hanya download kode untuk halaman yang dikunjungi.

Tree Shaking

Hapus kode yang tidak pernah dipakai (dead code elimination). Vite dan Webpack melakukan ini otomatis.

3. Lazy Loading

Tunda download komponen/resource sampai dibutuhkan.

Minification

Hapus whitespace, rename variable jadi 1 huruf.

Gzip/Brotli Compression

Kompres file di server sebelum dikirim ke browser.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami cara mengoptimasi JavaScript bundle., dan bisa mengimplementasikan code splitting dan lazy loading. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

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

Cara Membayangkannya

Optimasi bundle seperti packing — bawa hanya yang perlu. 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 javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 2-14: React.lazy + Suspense. Baris 16-19: Dynamic import. Baris 22-33: Manual chunks di Vite.

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 sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

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

javascript

// CODE SPLITTING — React.lazy
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));
const Reports = lazy(() => import('./Reports'));

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

// DYNAMIC IMPORT
const loadChartLibrary = async () => {
  const { Chart } = await import('./heavy-chart-library');
  return new Chart();
};

// WEBPACK/VITE — Manual split
// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@mui/material', '@mui/icons-material']
        }
      }
    }
  }
};

// ANALYZE BUNDLE
npx vite-bundle-visualizer

Penjelasan Kode

Baris 2-14: React.lazy + Suspense. Baris 16-19: Dynamic import. Baris 22-33: Manual chunks di Vite.

Prompt AI

Jelaskan bedanya code splitting dan lazy loading.

Pertanyaan Reflektif

Analyze bundle-mu. Paling besar dari library apa? Bisa di-split?