preloadModule

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

• Reference
  • preloadModule(href, options)
• שימוש
  • Preloading בזמן רינדור
  • Preloading בתוך event handler

Reference

preloadModule(href, options)

כדי לבצע preload למודול ESM, קראו לפונקציה preloadModule מתוך react-dom.

import { preloadModule } from 'react-dom';

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

ראו דוגמאות נוספות בהמשך.

הפונקציה preloadModule מספקת לדפדפן רמז שכדאי להתחיל להוריד את המודול הנתון, מה שיכול לחסוך זמן.

Parameters

• href: מחרוזת. ה-URL של המודול שברצונכם להוריד.
• options: אובייקט. כולל את המאפיינים הבאים:
  • as: מחרוזת חובה. חייב להיות 'script'.
  • crossOrigin: מחרוזת. מדיניות CORS לשימוש. הערכים האפשריים: anonymous ו-use-credentials.
  • integrity: מחרוזת. hash קריפטוגרפי של המודול לצורך אימות אותנטיות.
  • nonce: מחרוזת. nonce קריפטוגרפי שמאפשר את המודול כשמשתמשים ב-Content Security Policy קשוחה.

Returns

preloadModule לא מחזירה דבר.

Caveats

• כמה קריאות ל-preloadModule עם אותו href משפיעות כמו קריאה אחת.
• בדפדפן אפשר לקרוא ל-preloadModule בכל מצב: בזמן רינדור קומפוננטה, בתוך effect, בתוך event handler, וכן הלאה.
• ברינדור צד שרת או ברינדור Server Components, ל-preloadModule יש השפעה רק אם קוראים לה בזמן רינדור קומפוננטה או בהקשר async שמקורו ברינדור קומפוננטה. קריאות אחרות ייחסמו.

שימוש

Preloading בזמן רינדור

קראו ל-preloadModule בזמן רינדור קומפוננטה אם אתם יודעים שהיא או הילדים שלה ישתמשו במודול ספציפי.

import { preloadModule } from 'react-dom';

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

אם אתם רוצים שהדפדפן יתחיל גם להריץ את המודול מיד (ולא רק להוריד אותו), השתמשו ב-preinitModule במקום. אם אתם רוצים לטעון סקריפט שאינו מודול ESM, השתמשו ב-preload.

Preloading בתוך event handler

קראו ל-preloadModule בתוך event handler לפני מעבר לעמוד או מצב שבהם המודול יידרש. כך התהליך מתחיל מוקדם יותר לעומת קריאה בזמן רינדור העמוד או המצב החדש.

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