💻 easy.advice

Зависимости или dev-зависимости: не промахнись!

#разработка #оптимизация #приложение #команда
сб, 14 июня 2025 г. - 2 мин чтения
Разработчик проверяет список зависимостей

📦 Зависимости или dev-зависимости: не промахнись

В package.json есть два больших раздела: dependencies и devDependencies. Кажется, что это мелочь. На самом деле от выбора зависит, соберётся ли проект на проде, сколько весит бандл и как быстро ставится проект на новой машине.

Простая логика выбора

  • Используешь пакет в рантайме (в браузере или на сервере) — это dependencies.
  • Пакет нужен только при разработке или тестах — складывай в devDependencies.

Если сомневаешься, спроси себя: «Приложение упадёт без этого пакета на проде?» Если да — это точно dependencies.

Типовые кейсы

  1. UI-библиотеки, роутеры, HTTP-клиенты. Работают в приложении → dependencies.
  2. Бандлеры, транспилеры, линтеры. Нужны только при сборке → devDependencies.
  3. Тестовые утилиты (Jest, Testing Library). Запускаем локально или в CI → devDependencies.
  4. Storybook или mock-сервер. Помогают в разработке → devDependencies.
  5. Рантаймовые SDK (Sentry, Stripe). Подключены на проде → dependencies.
  6. TypeScript типы (@types/*). Нужны до сборки, в бандл не попадают → devDependencies.
  7. CSS- и UI-фреймворки. Если стили подгружаются пользователю, пакет должен лежать в dependencies.
  8. CLI-утилиты (rimraf, cross-env). Только для скриптов → devDependencies.

Что будет, если перепутать

  • 🧨 Поставил рантайм-пакет в devDependencies. На проде npm install --production его не поставит, и приложение упадёт.
  • 🐢 Сложил dev-пакет в dependencies. Бандл вырастет, установка займёт больше времени, CI может грузить лишние мегабайты.
  • 🧾 Непонятный список зависимостей. Новому разработчику труднее понять, что нужно для приложения, а что можно отключить.

Полезные советы

  • 🔍 Проверь скрипты. Если пакет упоминается только в scripts или lint-staged, почти всегда это devDependencies.
  • 🧪 Запусти сборку в прод-режиме. Команда npm ci --only=production покажет, хватает ли зависимостей на реальном сервере.
  • 📝 Веди короткую памятку. Занеси в README список «наших» пакетов и куда их ставить.
  • 🔄 Регулярно чисти лишнее. Раз в квартал смотри на package.json и убирай пакеты, которыми не пользуешься.

Итог

Правильное размещение пакетов экономит время, место и нервы. Держите рядом простое правило «прод — в dependencies, разработка — в devDependencies», не перегружайте проект, и он отблагодарит вас стабильной работой. 💪