preloadModule

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

• Reference
  • preloadModule(href, options)
• Usage
  • Render செய்யும்போது preloading
  • Event handler-இல் preloading

Reference

preloadModule(href, options)

ESM module ஒன்றை preload செய்ய, react-dom-இலிருந்து preloadModule function-ஐ அழைக்கவும்.

import { preloadModule } from 'react-dom';

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

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

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

Parameters

• href: ஒரு string. Download செய்ய விரும்பும் module-இன் URL.
• options: ஒரு object. இது பின்வரும் properties-ஐக் கொண்டுள்ளது:
  • as: அவசியமான string. இது 'script' ஆக இருக்க வேண்டும்.
  • crossOrigin: ஒரு string. பயன்படுத்த வேண்டிய CORS policy. இதன் சாத்தியமான values anonymous மற்றும் use-credentials.
  • integrity: ஒரு string. Module-இன் நம்பகத்தன்மையை சரிபார்க்க அதன் cryptographic hash.
  • nonce: ஒரு string. கடுமையான Content Security Policy பயன்படுத்தும்போது module-ஐ அனுமதிக்க cryptographic nonce.

Returns

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

Caveats

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

Usage

Render செய்யும்போது preloading

அந்த component அல்லது அதன் children குறிப்பிட்ட module ஒன்றைப் பயன்படுத்தும் என்பது தெரிந்திருந்தால், component render செய்யும்போது preloadModule-ஐ அழைக்கவும்.

import { preloadModule } from 'react-dom';

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

Browser module-ஐ download செய்வதோடு மட்டும் இல்லாமல் உடனே execute செய்யத் தொடங்க வேண்டும் என விரும்பினால், அதற்கு பதிலாக preinitModule-ஐப் பயன்படுத்துங்கள். ESM module அல்லாத script ஒன்றை load செய்ய விரும்பினால், preload-ஐப் பயன்படுத்துங்கள்.

Event handler-இல் preloading

Module தேவைப்படும் page அல்லது state-க்கு மாறுவதற்கு முன், event handler-இல் preloadModule-ஐ அழைக்கவும். புதிய page அல்லது state render ஆகும் போது அழைப்பதை விட, இது செயல்முறையை முன்கூட்டியே தொடங்குகிறது.

import { preloadModule } from 'react-dom';

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