Bundle Awareness
Membaca biaya JavaScript dari dependency, client boundary, dan feature yang dikirim sebelum user membutuhkannya.
Tujuan belajar
- Menjelaskan mengapa JavaScript browser memiliki biaya user-facing
- Mengenali dependency atau feature yang tidak kritis untuk initial route
- Membaca build output atau report sebagai arah investigasi
- Memilih trade-off tanpa menghapus feature secara membabi buta
Isi lesson
6 blok- 1.JavaScript yang dikirim ke browser adalah biaya yang harus dibacaBelum selesaiWajib
- 2.Catatan dari route yang perlu ditelusuriBelum selesaiWajib
- 3.Writing practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Bundle awareness bukan perburuan angka tanpa konteksBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
JavaScript yang dikirim ke browser adalah biaya yang harus dibaca
WajibSetiap Client Component, dependency browser, dan feature interaktif membawa biaya download, parse, serta execution di device user. Bukan berarti semua JavaScript buruk. Filter, editor, chart, modal, dan analytics dapat memberi nilai nyata. Pertanyaan engineering-nya adalah: apakah user membutuhkan code tersebut untuk melihat route pertama, atau baru ketika memilih action tertentu? Production build dan bundle report membantu menemukan kandidat, tetapi nama file besar saja belum cukup untuk menghapus dependency. Hubungkan temuan dengan journey, client boundary, route, dan behavior yang akan hilang atau tertunda bila code dipindahkan.
Bagian ini memengaruhi progres lesson.
Catatan dari route yang perlu ditelusuri
Wajib{
"route": "/learn/frontend-engineering",
"initialClientFeatures": [
"course filters",
"search library",
"insights chart",
"help modal"
],
"observation": "Insights chart dan help modal baru dipakai setelah learner memilih action."
}Catatan ini belum membuktikan sebuah dependency harus dihapus. Ia memberi kandidat untuk ditinjau: apakah chart perlu masuk initial route, apakah modal dapat dimuat setelah click, dan apakah search library harus tersedia sebelum learner mengetik. Uji perubahan terhadap journey penting, bukan hanya ukuran bundle.
Bagian ini memengaruhi progres lesson.
Writing practice
WajibLatihan menulis
Buat bundle review note dari catatan route di atas. Pilih satu feature yang paling layak ditelusuri, jelaskan mengapa feature itu bukan kebutuhan initial route, sebutkan user action yang akan memicu pemuatannya, risiko jika feature ditunda, dan bukti yang akan kamu bandingkan sebelum serta sesudah perubahan.
Tulis draft dulu sebelum menandai writing practice selesai.
0/300 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Apa pertanyaan yang paling tepat sebelum memindahkan dependency dari initial bundle?
Progres lesson naik setelah jawaban benar.
Catatan penting
WajibBundle awareness bukan perburuan angka tanpa konteks
Memecah semua component kecil dapat menambah request, loading state, dan complexity tanpa dampak berarti. Cari biaya yang dapat dihindari pada route atau interaction nyata, lalu bandingkan hasilnya. Ukuran bundle adalah satu sinyal; pengalaman membuka page dan menggunakan feature tetap menjadi tujuan.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- JavaScript client memiliki biaya download, parse, dan execution pada device user.
- Build output atau report memberi kandidat investigasi, bukan instruksi otomatis untuk menghapus code.
- Nilai feature ditentukan oleh journey dan kapan user membutuhkannya.
- Feature yang ditunda perlu tetap memiliki loading state serta behavior yang jelas.
- Berikutnya, code splitting memisahkan code berdasarkan route atau component yang memang tidak perlu tersedia sejak awal.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: JavaScript yang dikirim ke browser adalah biaya yang harus dibaca.