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