📌 Как получить данные до загрузки 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 проекта

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

#буст

😂😂

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

#развлекалово

📌 Шпаргалка по Performance API и DevTools

Когда проект начинает «тормозить», в ход идут инструменты для поиска узких мест.

DevTools → Memory

1. Делайте Heap snapshot, чтобы находить утечки.

2. Смотрите на Retained size, чтобы увидеть, какие объекты удерживают память.

3. Проверяйте, не остались ли «висящие» DOM-ноды или слушатели после удаления элементов.

Всё про замеры времени и оптимизацию рендера — на картинке ⤴️

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

#буст

🏛 Архитектура для фронтенд-разработчиков

Сегодня мало просто знать React или Vue — работодатели смотрят на то, как вы строите архитектуру и работаете с масштабируемыми проектами.

Подобрали актуальные материалы, которые помогут разобраться.

➡️ Patterns.dev

Современные архитектурные, рендеринг- и перфоманс-паттерны для JavaScript и React.

➡️ web.dev/patterns

Официальные паттерны от команды Chrome: компоненты, layout-решения, best practices.

➡️ Atomic Design

Онлайн-книга Брэдa Фроста про дизайн-системы и компонентное мышление.

➡️ Feature-Sliced Design

Методология структурирования фронтенда по фичам. Есть подробная дока и гайдлайны.

➡️ Next.js — Architecture

Документация по новой архитектуре App Router: серверные/клиентские компоненты, кеширование, PPR.

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

#свежак

🙃 Пропавшие уведомления

Приложение получает уведомления по WebSocket. Пользователи жалуются, что после переподключения к интернету они не видят часть уведомлений.

Что скорее всего не реализовано ❓

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

#междусобойчик

🏃‍♀️ Новый поток курса — собери своих AI-агентов

7 октября стартует второй поток курса «AI-агенты для DS-специалистов».
За 5 недель вы научитесь собирать агентов, которые уже сейчас будут помогать бизнесу.

В кружке выше Максим Шаланкин, наш преподаватель, рассказывает подробнее — включай, чтобы не пропустить.

👉 Записаться на курс

😎 Топ-вакансий для фронтендеров за неделю

Middle/Senior Frontend разработчик — удаленно (Минск)

Frontend-разработчик (React) — офис (Краснодар)

React Developer (Middle/Senior) — удаленно

Middle / Middle+ Frontend Developer (Vue) — от 200 000 до 250 000 ₽, удаленно (Казань)

Frontend-разработчик — офис (Ярославль)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

📱 Эмуляция viewport’а в e2e и SSR

Чтобы протестить мобильный рендер без devtools — эмулируй размер экрана прямо из CLI:

npx playwright open --viewport-size=375,667 https://localhost:3000

Подходит для проверки:

— SSR-адаптивности до загрузки JS

— бага isMobile() в Next.js

— layout’а на разных устройствах

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

#буст