Сижу сегодня, разбираю очередной "стоковый" проект от сторонней студии... И снова это. 🤦♂️
Вот же ж, ну зачем?!
Простейший сайт-визитка, а в зависимостях — пол-интернета: jQuery (хотя никакого IE6 уже лет 10 как нет), три разных слайдера "на всякий случай", модалки через FancyBox (хотя давно есть <dialog>), кастомный скроллбар (потому что "дизайнер так захотел"), и, конечно же, целый Bootstrap — хотя использовали от него только сетку.
И самое смешное — всё это великолепие собрано через Webpack с кучей плагинов, которые добавляют в бандл ещё 300 КБ служебного кода.
🔍 Почему так происходит? Давайте копнём глубже
1. "Быстро — значит хорошо" (Spoiler: нет)
В студиях часто жёсткие дедлайны и потогонная система. Менеджеру важно отчитаться: "Мы сделали 10 проектов за месяц!"
Что делает разработчик?
- Берёт шаблонный сборщик (типа create-react-app или vue-cli)
- Тащит туда все популярные библиотеки "про запас"
- Быстро натягивает вёрстку на костыли
- Сдаёт проект и забывает
Итог: Клиент получает "коробочное решение", которое:
- Грузится 5 секунд
- Съедает половину оперативы на мобиле
- Ломается при первом же обновлении
2. "Мы так всегда делали" (Инерция мышления)
Знакомый сценарий?
- В 2010-м подключали jQuery — потому что IE6 не понимал querySelector
- В 2015-м добавили Lodash — потому что "а вдруг понадобится _.deepClone?"
- В 2020-м впихнули Axios — хотя fetch() уже везде работает
Но времена изменились!
- Современный JS (ES6+) покрывает 90% случаев, где раньше нужны были библиотеки
- CSS Grid/Flexbox убил необходимость в Bootstrap-сетках
- Нативные API браузеров стали в разы мощнее
Но многие до сих пор пишут как в 2010-м, просто по привычке.
3. "Настоящий программист должен..." (Мифы индустрии)
Миф №1: "Писать всё с нуля — это непрофессионально"
(На самом деле: Профессионал знает, когда стоит взять библиотеку, а когда — написать 10 строк своего кода)
Миф №2: "Чем сложнее сборка — тем круче разработчик"
(Реальность: Если ваш Gulpfile больше 300 строк — вы что-то делаете не так)
Миф №3: "Без TypeScript/Redux/Sass проект — говнокод"
(Правда: Для лендинга на 5 страниц всё это — overengineering)
4. "Клиент же не заметит..." (Эффект Даннинга-Крюгера)
Самый опасный момент — когда разработчик не осознаёт последствий:
- "Ну и что, что подключил Moment.js для одной даты? Всего-то 70 КБ!"
- "Зато у нас 'крутая анимация скролла' — ради неё можно и 100 КБ скриптов добавить"
- "Это же кэшируется, какая разница?"
А потом:
- Google PageSpeed показывает 30/100
- SEO-специалисты рвут волосы
- Пользователи уходят на второй секунде загрузки
💣 Чем это аукается на практике?
Случай из жизни #1
Пришёл на проект — интернет-магазин на WordPress. Открываю network — 1.8 МБ JavaScript.
Что внутри?
- 3 (!) разных слайдера (Swiper, OwlCarousel, Slick)
- jQuery + jQuery UI (хотя WP уже давно использует свой $)
- Кастомный скроллбар (потому что "дизайнеру не нравится стандартный")
- Анимации через GSAP (хотя можно было на CSS)
Итог: Первый контент отрисовывался через 4.7 секунды на 3G.
Случай из жизни #2
Молодая студия сделала сайт на React — обычный блог без динамики.
Что внутри сборки?
- Redux (хотя хватило бы useState)
- Redux-Thunk (хотя никаких асинхронных действий не было)
- 5 UI-библиотек (Material-UI, AntD, Chakra — все сразу)
- Кастомный роутер (потому что "так удобнее")
Итог: Базовый бандл — 2.3 МБ. Время загрузки — 6+ секунд.
🛠️ Как с этим бороться?
Для заказчиков:
- Задавайте вопросы
"Какие библиотеки вы используете и зачем?"
"Можно ли сделать это нативными средствами?"
"Как это повлияет на скорость?" - Требуйте аудит
Перед принятием работы — проверяйте:
Размер бандла (например через Bundlephobia)
Количество запросов
Время загрузки на медленных соединениях - Прописывайте ТЗ
Чётко указывайте:
Какие библиотеки можно использовать
Лимиты по скорости/размеру
Запрет на "ненужные" фичи
Для разработчиков:
- Принцип "Минимальной достаточности"
Прежде чем добавить зависимость — спросите:
Действительно ли это нужно?
Нет ли нативной альтернативы?
Стоит ли 50 КБ кода ради одной функции? - "Плагин — только если..."
Библиотека оправдана, если:
Реализация "вручную" займёт значительно больше времени
Нужна поддержка сложного функционала (например, работа с картами)
Это ядро проекта (например, React для SPA) - Рефакторинг по расписанию
Раз в полгода:
Удаляйте неиспользуемые зависимости
Заменяйте тяжёлые решения на лёгкие
Обновляйте версии
🌍 Большая картина
Проблема глубже, чем кажется. Это кризис индустрии:
- Буткемпы штампуют "специалистов", которые знают только React, но не понимают базового JS
- Студии гонятся за количеством, а не качеством
- Заказчики часто не понимают, за что платят
Но выход есть!
- Разработчикам: учите основы, а не только фреймворки
- Менеджерам: выделяйте время на оптимизацию
- Заказчикам: интересуйтесь технологиями
💬 Ваше мнение?
А вы сталкивались с "плагинобесием"? Как боролись? Давайте обсудим в комментах! 👇
P.S. Следующий пост сделаю разбор — "Как я сократил бандл с 2 МБ до 200 КБ без потери функционала". Интересно? Ставьте ❤️!