Очистите зависимости проекта — ускорьте разработку и сборку!

ср, 30 апреля 2025 г. - 3 мин чтения
Зависимости, замедляющие разработку

Очистите зависимости проекта — ускорьте разработку и сборку

Каждая зависимость в вашем проекте — это дополнительное время сборки, место на диске, потенциальная уязвимость, увеличенный размер приложения и риск конфликтов версий.

Особенно это касается неиспользуемых зависимостей и библиотек, которые часто:

  • Устанавливаются для тестирования, но забываются,
  • Перестают использоваться, но остаются в package.json,
  • Дублируются с другими пакетами,
  • Не обновляются годами и содержат уязвимости.

🚨 Почему это проблема?

  • ⏳ Зависимости замедляют установку (npm install),
  • 🏗️ Увеличивают время сборки проекта,
  • 💾 Раздувают размер node_modules и финального бандла,
  • 🐛 Создают конфликты версий,
  • 🔒 Добавляют уязвимости безопасности,
  • 📱 Увеличивают размер приложения для пользователей.

📦 Какие зависимости чаще всего висят “мертвым грузом”

🔹 Production зависимости

  • lodash (если используете современный JS)
  • moment.js (замените на date-fns или нативные Date)
  • jquery (если используете современные фреймворки)
  • axios + fetch одновременно
  • Полифиллы для старых браузеров (если не поддерживаете их)

🔹 Устаревшие сборщики и инструменты

  • webpack (если перешли на Vite)
  • gulp, grunt (если используете современные сборщики)
  • bower (давно устарел)

🔹 Дублирующиеся линтеры и форматтеры

  • tslint (заменён на ESLint)
  • jshint, jslint (если используете ESLint)
  • Несколько конфигов Prettier

🔹 Тестовые библиотеки

  • mocha + jest одновременно
  • karma (если тестируете в Node.js)
  • protractor (устарел, используйте Playwright/Cypress)

🔹 CSS-препроцессоры и стили

  • node-sass (замените на sass)
  • less, stylus (если используете CSS-in-JS)
  • Несколько CSS-фреймворков одновременно

🔹 Типизация

  • @types/* для библиотек, которые уже включают типы
  • Дублирующиеся типы

✅ Как действовать

1. Анализ неиспользуемых зависимостей

# Установите depcheck
npm install -g depcheck
 
# Запустите анализ
depcheck
 
# Или используйте npm-check
npm install -g npm-check
npm-check

2. Проверка устаревших пакетов

# Проверить устаревшие зависимости
npm outdated
 
# Или с более подробной информацией
npm-check -u

3. Аудит безопасности

# Проверка уязвимостей
npm audit
 
# Автоматическое исправление
npm audit fix
 
# Принудительное исправление (осторожно!)
npm audit fix --force

4. Анализ размера bundle

# Для webpack
npx webpack-bundle-analyzer dist/static/js/*.js
 
# Для Vite
npx vite-bundle-analyzer
 
# Универсальный анализатор
npx bundlephobia

🛠️ Инструменты для очистки

Knip — современный инструмент для поиска мёртвого кода ⭐

Knip — это продвинутый инструмент для поиска и удаления неиспользуемых зависимостей, экспортов и файлов в JavaScript/TypeScript проектах.

# Установка
npm install -g knip
 
# Запуск анализа
knip
 
# Или без установки
npx knip

Преимущества Knip:

  • 🎯 Точный анализ — использует entry points и понимает структуру проекта
  • 🔌 100+ плагинов — поддержка Astro, Next.js, Vite, Jest, Cypress и многих других
  • 📊 Детальные отчёты — показывает неиспользуемые файлы, экспорты и зависимости
  • Быстрая работа — оптимизирован для больших проектов и монорепозиториев
  • 🛡️ Безопасность — помогает найти потенциальные уязвимости

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

  • Регулярно проводите аудит — раз в месяц или перед релизом,
  • Используйте точные версии в production (npm shrinkwrap),
  • Разделяйте dev и prod зависимости правильно,
  • Предпочитайте более лёгкие альтернативы (например, date-fns вместо moment),
  • Используйте tree-shaking для исключения неиспользуемого кода,
  • Попробуйте Knip — он часто находит то, что пропускают другие инструменты,
  • Анализируйте размер бандла — следите за тем, что попадает в production.

🔧 Автоматизация очистки

Добавьте в package.json скрипты:

{
  "scripts": {
    "deps:check": "depcheck",
    "deps:knip": "knip",
    "deps:update": "npm-check-updates -u",
    "deps:audit": "npm audit",
    "deps:clean": "npm prune && npm dedupe",
    "bundle:analyze": "npx webpack-bundle-analyzer dist/static/js/*.js"
  }
}

Настройте pre-commit хуки:

# Установите husky
npm install --save-dev husky
 
# Добавьте хук
echo "npm run deps:audit" > .husky/pre-commit

📝 Вывод

🔻 Избыточные зависимости:

  • замедляют разработку,
  • увеличивают время сборки,
  • создают уязвимости,
  • усложняют поддержку проекта,
  • увеличивают размер приложения.

🧹 Регулярно проводите ревизию всех зависимостей проекта. Удаляйте неиспользуемое, обновляйте устаревшее, заменяйте тяжёлые библиотеки на лёгкие альтернативы. Используйте современные инструменты как Knip для более точного анализа и следите за размером финального бандла.