link rel='modulepreload': Оптимизация загрузки модулей JavaScript

Производительность веб-сайтов часто сводится к продуманной загрузке ресурсов. Хотя уже давно существуют подсказки предзагрузки, modulepreload специально разработан для современного JavaScript. Давайте разберёмся, что делает его особенным.

Используя <link rel="modulepreload">, вы сообщаете браузеру: Эй, мне скоро понадобится этот модуль — не мог бы ты загрузить его и подготовить?. Браузер загружает модуль, парсит и заранее компилирует. Это отличается от обычной предварительной загрузки, выполняющей только загрузку.

<!-- Это только загружает файл -->
<link rel="preload" href="/js/app.js" as="script">

<!-- Это загружает, парсит и компилирует модуль -->
<link rel="modulepreload" href="/js/app.js">

Настоящая мощь проявляется при работе с зависимостями модулей. Единственный modulepreload автоматически обрабатывает весь граф зависимостей. Когда основной модуль импортирует другие модули, modulepreload подхватывает и подготавливает их все — нет необходимости в отдельных подсказках.

<!-- До: Требуется несколько предзагрузок  -->
<link rel="preload" href="/js/main.js" as="script">
<link rel="preload" href="/js/utils.js" as="script">
<link rel="preload" href="/js/data.js" as="script">

<!-- After: Single modulepreload обрабатывает всё -->
<link rel="modulepreload" href="/js/main.js">

Когда использовать modulepreload

modulepreload отлично подходит для приложений с серьёзными JavaScript-зависимостями или для разделения кода на основе маршрутов. Но обратите внимание на компромисс с памятью — modulepreload компилирует модули заранее, потребляя больше памяти. Для небольших приложений или редко используемых модулей обычный динамический импорт может быть более эффективным.

Комментарии