Выкатил крупное обновление портфолио. Главная цифра: main-бандл похудел со 174.96 до 144.57 KB gzip — минус 17%. Без переписывания с нуля — только генеральная уборка.

Что именно дало эти 30 KB:

1. Framer Motion тащил в бандл всю библиотеку, хотя мне нужны только DOM-анимации. Перешёл с полного motion на LazyMotion + domAnimation — и tree-shaking наконец заработал как задумано. Признаюсь, долго был уверен, что он работает сам по себе. Не работает.

2. Swiper весит ~93 KB, а нужен только в двух секциях ниже первого экрана. Вынес их в React.lazy — слайдеры больше не блокируют первую отрисовку.

3. Выпилил зависимости, лежавшие мёртвым грузом: react-type-animation, ajv, ajv-keywords. Пахнущий код — это не только тот, что плохо написан. Это и тот, что больше не нужен, но всё ещё едет к каждому пользователю.

Параллельно переработал мобильный дизайн: убрал жёсткий min-height: 100dvh у hero на экранах уже 768px, ввёл единую систему отступов, починил переносы в русских заголовках через Trans + неразрывные пробелы. Мелочи, которые в сумме и есть дизайн.

Итог по Lighthouse (desktop): Performance 98, Best Practices 100, SEO 100, FCP 0.8 с, CLS — ровно 0.

Да, проект всё ещё на CRA — можете начинать кидать помидоры в комментариях. Но смысл именно в этом: даже на «устаревшем» сборщике грамотный code-splitting и чистка зависимостей дают минус 17% и 98 баллов перформанса. Инструмент решает меньше, чем принято думать.

Вывод, который заберите себе: прежде чем оптимизировать, прогоните npm run analyze. У меня три самых жирных проблемы нашлись за десять минут анализа, а не за неделю рефакторинга.

Живой результат: https://antoshkindev.ru/?lang=ru А что у вас лежит мёртвым грузом в бандле? Самая неожиданная находка из npm run analyze — в комментарии.