preinitModule

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

• Referensi
  • preinitModule(href, options)
• Penggunaan
  • Preloading awal saat me-render
  • Preloading pada event handler

Referensi

preinitModule(href, options)

Untuk melakukan inisialisasi terhadap sebuah modul ESM, panggil fungsi preinitModule dari react-dom.

import { preinitModule } from 'react-dom';

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

Lihat contoh lainnya di bawah ini.

Fungsi preinitModule memberikan petunjuk kepada browser bahwa untuk mulai mengunduh dan mengeksekusi modul yang diberikan, yang dapat menghemat waktu. Modul yang kamu preinit akan dieksekusi segera setelah selesai diunduh.

Parameter

• href: sebuah string. URL modul yang ingin Anda unduh dan jalankan.
• options: sebuah objek. Ini berisi properti-properti berikut:
  • as: sebuah string yang wajib. Harus berupa 'script'.
  • crossOrigin: sebuah string. Kebijakan CORS yang akan digunakan. Nilai yang dapat digunakan adalah anonymous dan use-credentials.
  • integrity: sebuah string. Hash kriptografi modul, untuk memverifikasi keasliannya.
  • nonce: sebuah string. Sebuah nonce kriptografi untuk mengizinkan modul ketika menggunakan Content Security Policy yang ketat.

Kembalian

preinitModule tidak mengembalikan apa pun.

Peringatan

• Beberapa pemanggilan preinitModule dengan href memiliki efek yang sama dengan panggilan tunggal.
• Di browser, Anda dapat memanggil preinitModule dalam situasi apa pun: saat me-render komponen, di Effect, di event handler, dan sebagainya.
• Dalam rendering sisi server atau saat me-render Komponen Server, preinitModule hanya memiliki efek jika Anda memanggilnya saat me-render komponen atau dalam konteks asinkronisasi yang berasal dari rendering komponen. Pemanggilan lainnya akan diabaikan.

Penggunaan

Preloading awal saat me-render

Panggil preinitModule saat me-render komponen jika Anda mengetahui bahwa komponen tersebut atau anak komponennya akan menggunakan modul tertentu dan Anda setuju modul tersebut langsung dievaluasi serta berlaku segera setelah selesai diunduh.

import { preinitModule } from 'react-dom';

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

Jika Anda ingin agar browser hanya mengunduh modul tanpa langsung mengeksekusinya, gunakan preloadModule. Jika Anda ingin melakukan preinit skrip yang bukan modul ESM, gunakan preinit.

Preloading pada event handler

Panggil preinitModule dalam event handler sebelum bertransisi ke halaman atau state yang membutuhkan modul. Hal ini akan memulai proses lebih awal dibandingkan jika Anda memanggilnya saat merender halaman atau state baru.

import { preinitModule } from 'react-dom';

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