preloadModule

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

• הפניה
  • preloadModule(href, options)
• שימוש
  • טעינה מראש בזמן רינדור
  • טוען מראש בתוך מטפל באירועים

הפניה

preloadModule(href, options)

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

import { preloadModule } from 'react-dom';

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

עוד דוגמאות נוספות.

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

פרמטרים

• href: מחרוזת. ה-URL של המודול שברצונכם הורד.
• options: אובייקט. כולל את המאפיינים הבאים:
  • as: מחרוזת חובה. חייב להיות 'script'.
  • crossOrigin: מחרוזת. מדיניות CORS שימוש. הערכים האפשריים: anonymous ו-use-credentials.
  • integrity: מחרוזת. hash קריפטוגרפיה של המודול לצורך [תאימות אותנטיות]https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
  • nonce: מחרוזת. nonce קריפטוגרפי שמאפשר את המודול כשמשתמשים ב-Content Security Policy קשוחה.

מחזירה

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

אזהרות

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

שימוש

טעינה מראש בזמן רינדור

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

import { preloadModule } from 'react-dom';

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

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

טוען מראש בתוך מטפל באירועים

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

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