Подсказки для ресурсов: modulepreload
Предварительно загружайте модули ES для более быстрого запуска JavaScript
«Подсказки для ресурсов: modulepreload» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Зачем нужен modulepreload
Модули ES образуют граф зависимостей: входной модуль импортирует другие модули, а те импортируют дополнительные. Без специальной подготовки каждый следующий уровень дерева обнаруживается только после разбора предыдущего, что создаёт последовательный водопад загрузки и резко ухудшает производительность.
Что делает modulepreload
<link rel="modulepreload" href="/app.js"> сообщает браузеру, что модуль И его транзитивно импортируемые модули нужно немедленно загрузить параллельно. К моменту запуска <script type="module"> весь граф уже находится в кэше.
Сравнение с preload
preload также загружает файлы параллельно, но не учитывает инструкции импорта: предварительная загрузка файла модуля не загружает его зависимости. modulepreload автоматически следует импортам — в этом и заключается его предназначение.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Куда его помещать
В <head>, как можно раньше. Браузер немедленно запускает запрос предварительной загрузки и продолжает разбирать HTML. К моменту, когда позже в документе встречается соответствующий <script type="module">, файл уже находится в памяти.
Обнаружение и обход графа
Браузер разбирает предварительно загруженный модуль в поисках инструкций импорта, а затем рекурсивно выполняет параллельные запросы для каждого импортированного URL. Пользователь оплачивает один путь туда и обратно для каждого уровня, но получает параллельную загрузку внутри каждого уровня, что значительно сокращает критический путь.
Использование со сборщиками
Современные сборщики (Vite, Rollup, Webpack 5 и более поздних версий) автоматически создают теги modulepreload для фрагментов, полученных при разделении кода. В приложениях, собранных вручную, формируйте их во время сборки из графа импортов, чтобы список оставался точным при добавлении и удалении модулей.
Особенности CrossOrigin
Для междоменной предварительной загрузки модулей добавляйте crossorigin="anonymous". Это соответствует режиму загрузки по умолчанию у <script type="module"> и гарантирует повторное использование предварительно загруженной копии, а не её повторную загрузку без заголовков CORS.
Поддержка браузерами
modulepreload поддерживается в Chrome, Edge, Safari и последних версиях Firefox. В старых версиях Firefox он молча игнорируется: модули всё равно работают, просто без преимущества предварительной загрузки. Полифилл не нужен; в худшем случае загрузка в устаревших браузерах будет немного медленнее.
Ограничивайте размер графа
Предварительная загрузка сотен модулей расходует пропускную способность на код, который пользователь может никогда не выполнить. Предварительно загружайте только входные фрагменты уровня маршрута, а не глубоко отложенные фрагменты. Для редко используемых путей полагайтесь на prefetch (или выполняйте импорт по запросу).
Сочетание с другими подсказками
Для изображений и шрифтов в том же head свободно комбинируйте подсказки: preconnect для сторонних CDN, preload для критически важных шрифтов, modulepreload для входных модулей и prefetch для ресурсов следующей страницы. Эти подсказки не мешают друг другу.
Проверка
Откройте панель сети: при использовании modulepreload импорты второго уровня появляются как параллельные запросы, начинающиеся почти одновременно с входным модулем. Без него они появляются последовательно, и каждый запрос начинается только после завершения разбора родительского модуля.
Проверка знаний
Что делает modulepreload такого, чего не делает обычный preload того же файла модуля?
Итоги
modulepreload устраняет водопад загрузки модулей ES, заранее загружая входной модуль и его импорты параллельно, до выполнения. Размещайте его в начале <head>, формируйте из графа сборки, задавайте crossorigin для междоменной загрузки модулей и ограничивайте область применения входными точками маршрутов, чтобы не расходовать пропускную способность впустую.
Часто задаваемые вопросы
Урок «Подсказки для ресурсов: modulepreload» бесплатный?
Да — полный текст урока «Подсказки для ресурсов: modulepreload» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Подсказки для ресурсов: modulepreload»?
Предварительно загружайте модули ES для более быстрого запуска JavaScript Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Подсказки для ресурсов: modulepreload»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Атрибуты async и defer
- Предварительная загрузка, выборочная загрузка и предварительное соединение
- Отложенная загрузка изображений: loading=lazy
- Подсказки для ресурсов: modulepreload