rel=modulepreload

Базовая версия 2023

Новое

С сентября 2023 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

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

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

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

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

Атрибут as является необязательным для ссылок с rel="modulepreload", и по умолчанию равен "script". Он может быть установлен на "script" или любой целевой точке типа скрипта, такой как "audioworklet", "paintworklet", "serviceworker", "sharedworker", или "worker". Событие с именем "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 браузер обнаруживает и загружает два зависимых модуля.

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

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

html

<!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" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>

    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

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

Спецификация
Стандарт HTML # link-type-modulepreload

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`modulepreload`	66	≤79	115	53	17	66	115	47	17	9.0	66

См. также

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

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload