Petunjuk Sumber modulepreload
Pramuat modul ES untuk memulakan JavaScript dengan lebih pantas
Petunjuk Sumber modulepreload ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Sebab modulepreload Wujud
Modul ES membentuk graf kebergantungan: modul titik masuk mengimport modul lain, yang kemudiannya mengimport lebih banyak modul. Tanpa bantuan, setiap aras pepohon hanya ditemui selepas aras sebelumnya dihuraikan — lalu menghasilkan lata berjujukan yang menjejaskan prestasi pemuatan.
Fungsi modulepreload
<link rel="modulepreload" href="/app.js"> memberitahu pelayar supaya mengambil modul tersebut AND semua modul yang diimport secara transitif dengan segera, secara selari. Apabila <script type="module"> dijalankan, seluruh graf itu sudah berada dalam tembolok.
Perbandingan dengan preload
preload juga mengambil fail secara selari, tetapi tidak memahami pernyataan import — pramuat fail modul tidak memuatkan kebergantungannya. modulepreload mengikuti import secara automatik, dan itulah tujuan utamanya.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Tempat Meletakkannya
Dalam <head>, seawal mungkin. Pelayar memulakan permintaan pramuat dengan segera sambil terus menghuraikan HTML. Apabila <script type="module"> yang sepadan ditemui kemudian dalam dokumen, fail itu sudah berada dalam memori.
Penemuan dan Penelusuran Graf
Pelayar menghuraikan modul yang dipramuat untuk mencari pernyataan import, kemudian secara rekursif mengeluarkan permintaan selari bagi setiap URL yang diimport. Pengguna menanggung kos satu perjalanan pergi balik bagi setiap aras, tetapi memperoleh pemprosesan selari dalam setiap aras, lalu memendekkan laluan kritikal dengan ketara.
Gunakan dengan Penghimpun
Penghimpun moden (Vite, Rollup, Webpack 5+) menjana tag modulepreload untuk ketulan kod yang dipisahkan secara automatik. Dalam aplikasi yang dibina secara manual, jana tag tersebut daripada graf import pada masa binaan supaya senarainya kekal tepat apabila modul ditambah atau dibuang.
Pertimbangan CrossOrigin
Untuk pramuat modul merentas asal, sertakan crossorigin="anonymous". Ini sepadan dengan mod pengambilan lalai <script type="module">, lalu memastikan salinan yang dipramuat digunakan semula dan bukannya diambil semula tanpa pengepala CORS.
Sokongan Pelayar
modulepreload disokong dalam Chrome/Edge/Safari dan Firefox versi terkini. Dalam Firefox versi lama, ia diabaikan secara senyap — modul masih berfungsi, cuma tanpa manfaat pramuat. Tiada tampalan keserasian diperlukan; kesan paling buruk ialah pemuatan yang sedikit lebih perlahan pada pelayar lapuk.
Hadkan Saiz Graf
Memuatkan ratusan modul terlebih dahulu membazirkan lebar jalur untuk kod yang mungkin tidak pernah dijalankan oleh pengguna. Pramuat hanya ketulan titik masuk pada peringkat laluan, bukan ketulan yang dimuatkan tertunda jauh di dalam aplikasi. Gunakan prefetch (atau import atas permintaan) untuk laluan kod yang jarang digunakan.
Gabungkan dengan Petunjuk Lain
Untuk imej dan fon dalam head yang sama, gabungkan semuanya tanpa masalah: preconnect untuk CDN pihak ketiga, preload untuk fon kritikal, modulepreload untuk modul titik masuk, dan prefetch untuk aset halaman seterusnya. Petunjuk tersebut tidak mengganggu satu sama lain.
Pengesahan
Semak panel Rangkaian: dengan modulepreload, import aras kedua muncul sebagai permintaan selari yang bermula hampir serentak dengan modul titik masuk. Tanpanya, import tersebut muncul secara berperingkat, dengan setiap permintaan hanya bermula selepas induknya selesai dihuraikan.
Semakan Pengetahuan
Apakah yang dilakukan oleh modulepreload tetapi tidak dilakukan oleh preload biasa bagi fail modul yang sama?
Ringkasan
modulepreload menghapuskan lata modul ES dengan mengambil modul titik masuk dan importnya secara selari sebelum pelaksanaan. Letakkannya seawal mungkin dalam <head>, jana daripadanya graf binaan, tetapkan crossorigin untuk modul merentas asal, dan hadkan skopnya kepada titik masuk laluan supaya lebar jalur tidak dibazirkan.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Petunjuk Sumber modulepreload” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Petunjuk Sumber modulepreload”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Petunjuk Sumber modulepreload”?
Pramuat modul ES untuk memulakan JavaScript dengan lebih pantas Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Petunjuk Sumber modulepreload” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Atribut async dan defer
- Preload Prefetch dan Preconnect
- Pemuatan Malas Imej loading=lazy
- Petunjuk Sumber modulepreload