preloadModule

preloadModule("https://example.com/module.js", {as: "script"});

• Referensi
  • preloadModule(href, options)
• Penggunaan
  • Preload saat merender
  • Preload di event handler

Referensi

preloadModule(href, options)

Untuk melakukan preload modul ESM, panggil fungsi preloadModule dari react-dom.

import { preloadModule } from 'react-dom';

function AppRoot() {
  preloadModule("https://example.com/module.js", {as: "script"});
  // ...
}

Lihat contoh lainnya di bawah.

Fungsi preloadModule memberikan petunjuk kepada browser agar mulai mengunduh modul yang diberikan, sehingga dapat menghemat waktu.

Parameter

• href: string. URL dari modul yang ingin Anda unduh.
• options: objek. Berisi properti berikut:
  • as: string wajib. Harus bernilai 'script'.
  • crossOrigin: string. Kebijakan CORS yang digunakan. Nilai yang mungkin adalah anonymous dan use-credentials.
  • integrity: string. Hash kriptografi dari modul, untuk memverifikasi keasliannya.
  • nonce: string. Nonce kriptografi untuk mengizinkan modul saat menggunakan Content Security Policy yang ketat.

Return

preloadModule tidak mengembalikan apa pun.

Catatan Khusus

• Memanggil preloadModule beberapa kali dengan href yang sama akan memberikan efek yang sama seperti satu kali pemanggilan.
• Di browser, Anda dapat memanggil preloadModule dalam situasi apa pun: saat merender komponen, di Effect, di event handler, dan sebagainya.
• Pada server-side rendering atau saat merender Server Components, preloadModule hanya akan berpengaruh jika Anda memanggilnya saat merender komponen atau dalam konteks async yang berasal dari proses render komponen. Pemanggilan di luar itu akan diabaikan.

Penggunaan

Preload saat merender

Panggil preloadModule saat merender komponen jika Anda tahu bahwa komponen tersebut atau turunannya akan menggunakan modul tertentu.

import { preloadModule } from 'react-dom';

function AppRoot() {
  preloadModule("https://example.com/module.js", {as: "script"});
  return ...;
}

Jika Anda ingin browser langsung mengeksekusi modul (bukan hanya mengunduhnya), gunakan preinitModule. Jika Anda ingin memuat skrip yang bukan modul ESM, gunakan preload.

Preload di event handler

Panggil preloadModule di event handler sebelum berpindah ke halaman atau state di mana modul tersebut akan dibutuhkan. Ini akan memulai proses lebih awal dibandingkan jika Anda memanggilnya saat merender halaman atau state baru.

import { preloadModule } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preloadModule("https://example.com/module.js", {as: "script"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Mulai Wizard</button>
  );
}