Petunjuk Sumber Daya modulepreload
Muat awal modul ES agar JavaScript lebih cepat dimulai.
Petunjuk Sumber Daya modulepreload adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Mengapa Pemuatan Awal Modul Diperlukan
Modul ES membentuk graf dependensi: sebuah modul entri mengimpor modul lain, yang kemudian mengimpor lebih banyak modul. Tanpa bantuan, setiap tingkat dalam pohon hanya ditemukan setelah tingkat sebelumnya selesai diuraikan—menghasilkan rangkaian pemuatan berurutan yang sangat menurunkan kinerja pemuatan.
Fungsi Pemuatan Awal Modul
<link rel="modulepreload" href="/app.js"> memberi tahu peramban untuk segera mengambil modul tersebut DAN semua modul yang diimpornya secara transitif, secara paralel. Saat <script type="module"> dijalankan, seluruh graf sudah berada di tembolok.
Dibandingkan dengan Pemuatan Awal
Pemuatan awal juga mengambil berkas secara paralel, tetapi tidak memahami pernyataan impor—memuat awal berkas modul tidak berarti memuat awal dependensinya. Pemuatan awal modul mengikuti impor secara otomatis, dan itulah tujuan utamanya.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Tempat Meletakkannya
Di dalam <head>, sedini mungkin. Peramban segera memulai permintaan pemuatan awal dan terus menguraikan HTML. Saat <script type="module"> yang sesuai ditemukan di bagian dokumen berikutnya, berkas tersebut sudah berada di memori.
Penemuan dan Penelusuran Graf
Peramban menguraikan modul yang dimuat awal untuk mencari pernyataan impor, lalu secara rekursif mengambil setiap URL yang diimpor secara paralel. Pengguna tetap menanggung biaya satu perjalanan pulang-pergi untuk setiap tingkat, tetapi memperoleh paralelisme di dalam setiap tingkat, sehingga jalur kritis menjadi jauh lebih singkat.
Gunakan dengan Penggabung Modul
Penggabung modul modern (Vite, Rollup, Webpack 5+) secara otomatis menghasilkan tag pemuatan awal modul untuk potongan kode hasil pemisahan. Dalam aplikasi yang dibuat manual, hasilkan tag tersebut dari graf impor saat proses pembuatan agar daftarnya tetap akurat ketika modul ditambahkan atau dihapus.
Pertimbangan CrossOrigin
Untuk pemuatan awal modul lintas asal, sertakan crossorigin="anonymous". Hal ini sesuai dengan mode pengambilan bawaan <script type="module">, sehingga salinan yang dimuat awal dapat digunakan kembali dan tidak diambil ulang tanpa header CORS.
Dukungan Peramban
Pemuatan awal modul didukung di Chrome, Edge, Safari, dan Firefox versi terbaru. Di Firefox versi lama, fitur ini diabaikan tanpa pesan—modul tetap berfungsi, hanya tanpa manfaat pemuatan awal. Tidak diperlukan pengisi kompatibilitas; dampak terburuknya adalah pemuatan yang sedikit lebih lambat pada peramban lama.
Batasi Ukuran Graf
Memuat awal ratusan modul memboroskan bandwidth untuk kode yang mungkin tidak pernah dijalankan pengguna. Muat awal hanya potongan entri tingkat rute, bukan potongan yang dimuat tertunda secara mendalam. Percayakan pengambilan awal (atau impor sesuai kebutuhan) untuk jalur kode yang jarang digunakan.
Gabungkan dengan Petunjuk Lain
Untuk gambar dan font di bagian kepala dokumen yang sama, gunakan secara bebas: penyambungan awal untuk CDN pihak ketiga, pemuatan awal untuk font penting, pemuatan awal modul untuk modul entri, dan pengambilan awal untuk aset halaman berikutnya. Petunjuk-petunjuk tersebut tidak saling mengganggu.
Verifikasi
Periksa panel Network: dengan pemuatan awal modul, impor tingkat kedua muncul sebagai permintaan paralel yang dimulai hampir bersamaan dengan entri. Tanpanya, permintaan muncul secara bertahap, masing-masing baru dimulai setelah induknya selesai diuraikan.
Uji Pemahaman
Apa yang dilakukan pemuatan awal modul yang tidak dilakukan pemuatan awal biasa terhadap berkas modul yang sama?
Ringkasan
Pemuatan awal modul menghilangkan rangkaian pemuatan modul ES dengan mengambil modul entri dan impornya secara paralel sebelum eksekusi. Letakkan sedini mungkin di dalam <head>, hasilkan dari graf pembuatan, tetapkan crossorigin untuk modul lintas asal, dan batasi cakupannya pada titik entri rute agar bandwidth tidak terbuang.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Petunjuk Sumber Daya modulepreload” gratis?
Ya — teks lengkap “Petunjuk Sumber Daya modulepreload” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Petunjuk Sumber Daya modulepreload”?
Muat awal modul ES agar JavaScript lebih cepat dimulai. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Petunjuk Sumber Daya modulepreload” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Atribut async dan defer
- Preload Prefetch dan Preconnect
- Pemuatan Malas Gambar loading=lazy
- Petunjuk Sumber Daya modulepreload