rel="modulepreload" значение атрибута HTML

Ключевое слово modulepreload для атрибута rel элемента <link> предоставляет декларативный способ заранее загрузить модульный скрипт, разобрать и скомпилировать его, а также сохранить в карте модулей документа для последующего выполнения.

Предварительная загрузка позволяет заранее загружать модули и их зависимости, а также значительно сокращать общее время загрузки и обработки. Это возможно благодаря тому, что страницы могут загружать модули параллельно, а не последовательно, по мере обработки каждого модуля и обнаружения его зависимостей. Однако не следует предварительно загружать всё подряд! Выбор ресурсов для предварительной загрузки нужно уравновешивать с другими операциями, которые в противном случае могут задерживаться, ухудшая взаимодействие с пользователем.

Ссылки с rel="modulepreload" похожи на ссылки с rel="preload". Главное различие состоит в том, что preload только загружает файл и сохраняет его в кэше, а modulepreload загружает модуль, разбирает и компилирует его, а затем помещает результаты в карту модулей, чтобы модуль был готов к выполнению.

При использовании modulepreload режим запроса всегда равен cors, а свойство crossorigin определяет режим учётных данных запроса учётных данных. Если для crossorigin задано значение anonymous или "" (по умолчанию), то режим учётных данных — same-origin, а учётные данные пользователя, например файлы cookie и данные аутентификации, отправляются только для запросов с same-origin. Если для crossorigin задано значение use-credentials, то режим учётных данных — include, а учётные данные пользователя отправляются как для запросов одного источника, так и для междоменных запросов.

Атрибут as для ссылок с rel="modulepreload" необязателен; по умолчанию используется значение "script". Ему можно задать значение "script", "style", "json", "text" или любое назначение, связанное со скриптами, например "audioworklet", "paintworklet", "serviceworker", "sharedworker" или "worker". Полный список допустимых значений определён в таблице соответствия назначения предварительной загрузки модулей в спецификации HTML module preload destination. Список назначений, связанных со скриптами, см. в спецификации Fetch. Если используется любое другое назначение, на элементе возникает событие Event с именем "error".

Браузер может дополнительно автоматически загружать зависимости ресурса-модуля. Однако следует учитывать, что это оптимизация, зависящая от браузера: единственный способ гарантировать, что все браузеры попытаются предварительно загрузить зависимости модуля, — указать их по отдельности! Кроме того, события с именами load или error возникают сразу после успешной или неудачной загрузки указанных ресурсов. При автоматической загрузке зависимостей в основном потоке дополнительные события не возникают (однако можно отслеживать дополнительные запросы в сервис-воркере или на сервере).

Примеры

Рассмотрим пример basic-modules (рабочая версия), представленный в руководстве по модулям JavaScript.

Структура файлов этого примера показана ниже. Она включает модуль верхнего уровня main.js, который статически импортирует два зависимых модуля — modules/canvas.js и modules/square.js — с помощью инструкции import.

index.html
main.js
modules/
    canvas.js
    square.js

В HTML-коде примера ниже показано, как main.js загружается в элементе <script>. Только после загрузки main.js браузер обнаруживает и загружает два зависимых модуля.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

Приведённый ниже HTML-код обновляет пример, добавляя элементы <link> с атрибутом rel="modulepreload" для основного файла и каждого зависимого модуля. Это значительно быстрее, поскольку все три модуля начинают загружаться асинхронно и параллельно, прежде чем понадобятся. К моменту, когда main.js будет разобран и его зависимости станут известны, они уже будут загружены.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <link rel="modulepreload" href="main.js" />
    <link rel="modulepreload" href="modules/canvas.js" />
    <link rel="modulepreload" href="modules/square.js" />
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

Спецификации

Совместимость с браузерами

См. также

• Спекулятивная загрузка — сравнение <link rel="modulepreload"> с другими похожими возможностями повышения производительности.
• Предварительная загрузка модулей на web.dev