📌 Как получить данные до загрузки JS

Хотите ускорить первый рендер или мгновенные переходы по сайту? Подгружайте важные ресурсы заранее.

Для текущей страницы:

<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'">

Для будущих переходов:

<link rel="prefetch" href="/next-page-data.json" as="fetch">

➡️ preload — грузит ресурс сразу. Указываем as, чтобы браузер правильно приоритизировал загрузку.

➡️ prefetch — грузит «на будущее» с низким приоритетом, полезно для данных следующей страницы.

Для шрифтов добавляйте crossorigin, если они с другого домена.

🐸 Библиотека фронтендера

#буст

🛠 Фишка инструмента: Bundle Buddy

Bundle Buddy — это анализатор бандлов, который показывает, где ваш фронтенд тянет дубликаты кода. Иногда один и тот же модуль попадает в разные чанки — и вы даже не замечаете, как сборка пухнет.

Что дает:

➖ Находит повторяющиеся строки кода между чанками

➖ Работает через source-map (нужно включить исходники)

➖ Для Webpack есть плагин bundle-buddy-webpack-plugin

➖ В интерфейсе видно, какой код встречается в нескольких бандлах

Пример запуска:

npx bundle-buddy ./build/*.js.map

После этого открываете браузер и видите интерактивный граф с пересечениями кода.

🔗 GitHub проекта

🐸 Библиотека фронтендера

#буст