preload

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

• குறிப்பு
  • preload(href, options)
• பயன்பாடு
  • Rendering நேரத்தில் preloading
  • Event handler-இல் preloading

குறிப்பு

preload(href, options)

ஒரு resource-ஐ preload செய்ய, react-dom-இலிருந்து preload function-ஐ call செய்யுங்கள்.

import { preload } from 'react-dom';

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

மேலும் உதாரணங்களை கீழே பார்க்கவும்.

கொடுக்கப்பட்ட resource-ஐ download செய்யத் தொடங்க வேண்டும் என்ற hint-ஐ preload function browser-க்கு வழங்குகிறது; இதனால் நேரம் சேமிக்கலாம்.

Parameters

• href: ஒரு string. நீங்கள் download செய்ய விரும்பும் resource-ன் URL.
• options: ஒரு object. இதில் பின்வரும் properties உள்ளன:
  • as: தேவைப்படும் string. Resource-ன் வகை. இதன் சாத்தியமான values: audio, document, embed, fetch, font, image, object, script, style, track, video, worker.
  • crossOrigin: ஒரு string. பயன்படுத்த வேண்டிய CORS policy. இதன் சாத்தியமான values anonymous மற்றும் use-credentials. as "fetch" ஆக அமைக்கப்பட்டால் இது தேவைப்படும்.
  • referrerPolicy: ஒரு string. Fetch செய்யும்போது அனுப்ப வேண்டிய Referrer header. இதன் சாத்தியமான values no-referrer-when-downgrade (default), no-referrer, origin, origin-when-cross-origin, மற்றும் unsafe-url.
  • integrity: ஒரு string. Resource-ன் authenticity-ஐ verify செய்ய பயன்படும் cryptographic hash.
  • type: ஒரு string. Resource-ன் MIME type.
  • nonce: ஒரு string. Strict Content Security Policy பயன்படுத்தும்போது resource-ஐ அனுமதிக்க cryptographic nonce.
  • fetchPriority: ஒரு string. Resource-ஐ fetch செய்ய relative priority-ஐ suggest செய்கிறது. சாத்தியமான values auto (default), high, மற்றும் low.
  • imageSrcSet: ஒரு string. as: "image" உடன் மட்டும் பயன்படும். Image-ன் source set-ஐ குறிப்பிடுகிறது.
  • imageSizes: ஒரு string. as: "image" உடன் மட்டும் பயன்படும். Image-ன் sizes-ஐ குறிப்பிடுகிறது.

Returns

preload எதையும் return செய்யாது.

Caveats

• preload-க்கு செய்யப்படும் பல equivalent calls, ஒரே call போலவே விளைவு தரும். பின்வரும் rules அடிப்படையில் preload calls equivalent எனக் கருதப்படும்:
  • அவற்றுக்கு அதே href இருந்தால் இரண்டு calls equivalent; ஆனால்:
  • as image ஆக அமைக்கப்பட்டால், அதே href, imageSrcSet, மற்றும் imageSizes இருந்தால் இரண்டு calls equivalent.
• Browser-இல், எந்த சூழலிலும் preload-ஐ call செய்யலாம்: component render ஆகும்போது, Effect-இல், event handler-இல், போன்றவை.
• Server-side rendering-இல் அல்லது Server Components render செய்யும்போது, ஒரு component render ஆகும்போது அல்லது component render-இலிருந்து உருவான async context-இல் call செய்தால் மட்டுமே preload விளைவு தரும். மற்ற calls அனைத்தும் புறக்கணிக்கப்படும்.

பயன்பாடு

Rendering நேரத்தில் preloading

ஒரு component அல்லது அதன் children குறிப்பிட்ட resource-ஐப் பயன்படுத்தும் என்று தெரிந்தால், அந்த component render ஆகும்போது preload-ஐ call செய்யுங்கள்.

Event handler-இல் preloading

External resources தேவைப்படும் page அல்லது state-க்கு transition ஆகும் முன் event handler-இல் preload-ஐ call செய்யுங்கள். புதிய page அல்லது state render ஆகும் போது call செய்வதைவிட, இது process-ஐ முன்னதாகத் தொடங்க வைக்கிறது.

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>
  );
}