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: строка. Криптографическое хеш-значение модуля для проверки его подлинности.
  • nonce: строка. Криптографический nonce для разрешения работы модуля при использовании строгой политики Content Security Policy.

Возвращаемое значение

preloadModule ничего не возвращает.

Ограничения

• Несколько вызовов preloadModule с одинаковым href имеют тот же эффект, что и один вызов.
• В браузере вы можете вызвать preloadModule в любой ситуации: при отрисовке компонента, в эффекте, в обработчике событий и так далее.
• При рендеринге на стороне сервера или при рендеринге Server Components, 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>
  );
}