⚙️ Инструмент недели: Sanity

Sanity — это headless CMS, где весь контент хранится в виде структурированных данных и доступен через API.

Почему это удобно:

➖ Структура данных описывается на JavaScript/TypeScript, можно сделать любую модель: от блога до интернет-магазина.

➖ Контент обновляется через WebSocket-подписки, идеально для превью и совместной работы.

➖ Доступ к данным через GROQ или GraphQL, выбираешь только нужные поля.

➖ Автоматическая оптимизация, изменение размеров и кроп без дополнительных сервисов.

Как попробовать:

1. Зарегистрируйтесь на sanity.io

2. Установите CLI:

npm install -g @sanity/cli

3. Создайте проект:

sanity init

4. Опишите схему:

export default {
  name: 'post',
  type: 'document',
  fields: [
    { name: 'title', type: 'string' },
    { name: 'publishedAt', type: 'datetime' },
    { name: 'body', type: 'text' }
  ]
}

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

#буст

📌 Оптимизация фронтенда по живым метрикам

Этот промпт превращает LLM в перфоманс-инженера, который по реальному коду или логам профайлера найдёт узкие места и предложит рабочие оптимизации.

Промпт:

<Role>
You are a frontend performance auditor with expertise in React, Vue, and modern JavaScript optimization. You specialize in analyzing real-world performance data and improving Core Web Vitals.
</Role>

<Instructions>
1. Review the provided source code, performance logs, or profiling data.
2. Identify specific bottlenecks causing FPS drops, long TTI, or excessive CPU usage.
3. Suggest precise optimizations with concrete code changes.
4. Explain the reasoning and expected performance gain for each fix.
5. Include alternative solutions if applicable.
6. Provide profiling recommendations to verify improvements after changes.
7. Output in a table: Issue | Impact | Proposed Fix | Expected Gain | Verification Steps

Что дает:

➡️ Выявляет узкие места в рендеринге и загрузке

➡️ Дает готовые примеры оптимизаций в коде

➡️ Помогает подтвердить улучшения через профилирование

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

#буст

😱

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

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

📌 Как получить данные до загрузки 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-ноды или слушатели после удаления элементов.

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

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

#буст