Referensi API
API

preload - This feature is available in the latest Canary

Canary

Fungsi preload saat ini hanya tersedia di kanal Canary dan eksperimental React. Pelajari lebih lanjut tentang kanal rilis React di sini.

Catatan

Framework berbasis React sering kali menangani pemuatan sumber daya untuk Anda, jadi Anda mungkin tidak perlu memanggil API ini sendiri. Lihat dokumentasi framework Anda untuk detailnya.

preload memungkinkan Anda mengambil sumber daya seperti stylesheet, font, atau skrip eksternal yang ingin Anda gunakan.

preload("https://example.com/font.woff2", {as: "font"});

Referensi

preload(href, options)

Untuk memuat sumber daya, panggil fungsi preload dari react-dom.

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/font.woff2", {as: "font"});
  // ...
}

Lihat contoh lainnya di bawah ini.

Fungsi preload memberikan petunjuk kepada browser untuk mulai mengunduh sumber daya yang diberikan, yang dapat menghemat waktu.

Parameter

  • href: sebuah string. URL sumber daya yang ingin Anda unduh.
  • options: sebuah objek. Ini berisi properti-properti berikut:
    • as: string yang diperlukan. Jenis sumber daya. Nilai yang memungkinkan adalah audio, document, embed, fetch, font, image, object, script, style, track, video, worker.
    • crossOrigin: sebuah string. Kebijakan CORS yang akan digunakan. Nilai yang mungkin adalah anonymous dan use-credentials. Ini diperlukan ketika as disetel ke "fetch".
    • referrerPolicy: sebuah string. Referrer header yang akan dikirim saat fetching. Nilai yang memungkinkan adalah no-referrer-when-downgrade (default), no-referrer, origin, origin-when-cross-origin, dan unsafe-url.
    • integrity: sebuah string. Hash kriptografi sumber daya, untuk memverifikasi keasliannya.
    • type: sebuah string. Jenis MIME sumber daya.
    • nonce: sebuah string. Sebuah kriptografi nonce untuk mengizinkan sumber daya ketika menggunakan Content Security Policy yang ketat.
    • fetchPriority: sebuah string. Menyarankan prioritas relatif untuk mengambil sumber daya. Nilai yang memungkinkan adalah auto (default), high, dan low.
    • imageSrcSet: sebuah string. Hanya untuk digunakan dengan as: “image". Menentukan kumpulan sumber gambar.
    • imageSizes: sebuah string. Hanya untuk digunakan dengan as: “image". Menentukan ukuran gambar.

Kembalian

preload tidak mengembalikan apa pun.

Caveats

  • Multiple equivalent calls to preload have the same effect as a single call. Calls to preload are considered equivalent according to the following rules:
    • Two calls are equivalent if they have the same href, except:
    • If as is set to image, two calls are equivalent if they have the same href, imageSrcSet, and imageSizes.
  • In the browser, you can call preload in any situation: while rendering a component, in an Effect, in an event handler, and so on.
  • In server-side rendering or when rendering Server Components, preload only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.

Usage

Preloading when rendering

Call preload when rendering a component if you know that it or its children will use a specific resource.

Examples of preloading

Contoh 1 dari 4:
Preloading an external script 

import { preload } from 'react-dom';

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

If you want the browser to start executing the script immediately (rather than just downloading it), use preinit instead. If you want to load an ESM module, use preloadModule.

Preloading in an event handler

Call preload in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.

import { preload } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preload("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}
SebelumnyapreinitModule
SelanjutnyapreloadModule