preloadModule¶

Canary

Функция preloadModule в настоящее время доступна только в каналах React Canary и experimental. Подробнее о каналах выпуска React здесь.

Фреймворки на основе React часто обрабатывают загрузку ресурсов за вас, поэтому вы можете не вызывать этот API самостоятельно. За подробностями обращайтесь к документации вашего фреймворка.

preloadModule позволяет вам с нетерпением получить модуль ESM, который вы ожидаете использовать.

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

Описание¶

`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 для разрешения модуля при использовании строгой политики безопасности содержимого.

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

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

Источник — https://react.dev/reference/react-dom/preloadModule