🛠 Фишка инструмента: 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.

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

#свежак