🧱 Π‘ΡƒΡ‚ΡŒ

Π‘ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ зависимости, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ большС Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ:

  • ΡƒΠ΄Π°Π»Ρ‘Π½ старый ΠΊΠΎΠ΄
  • Π·Π°ΠΌΠ΅Π½ΠΈΠ»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ
  • экспСримСнтировали с ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ
  • Π·Π°Π±Ρ‹Π»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ зависимости

Π’Π°ΠΊΠΈΠ΅ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚:

  • Ρ€Π°Π·ΠΌΠ΅Ρ€ node_modules
  • врСмя установки ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
  • количСство ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… уязвимостСй

πŸ“¦ ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°

НапримСр, Π² package.json ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ:

{
  "dependencies": {
    "lodash": "^5.0.0",
    "axios": "^1.0.0"
  }
}

Но в кодС:

import axios from 'axios';

Π° lodash Π½ΠΈΠ³Π΄Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ.

ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ:

package.json
      ↓
лишний ΠΏΠ°ΠΊΠ΅Ρ‚
      ↓
Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ зависимости зря

βœ… РСшСниС

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ инструмСнты Π°Π½Π°Π»ΠΈΠ·Π° зависимостСй.

Один ΠΈΠ· популярных Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ²:

depcheck

Он провСряСт:

  • ΠΊΠ°ΠΊΠΈΠ΅ зависимости Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ
  • ΠΊΠ°ΠΊΠΈΠ΅ зависимости ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ, Π½ΠΎ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π² package.json

πŸ’» Код

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° зависимостСй Ρ‡Π΅Ρ€Π΅Π· depcheck

Установка:

npm install -g depcheck

Запуск Π² ΠΊΠΎΡ€Π½Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°:

depcheck

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Unused dependencies (ΠΠ΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹):

Unused dependencies
* lodash

Π˜Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ.

Missing dependencies (Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² ΠΊΠΎΠ΄Π΅, Π½ΠΎ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π² package.json):

Missing dependencies
* date-fns

ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ depcheck

depcheck Π½Π΅ всСгда ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ использованиС ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ².

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ с:

  • динамичСскими ΠΈΠΌΠΏΠΎΡ€Ρ‚Π°ΠΌΠΈ:
import(`./modules/${name}`)
  • alias-ΠΈΠΌΠΏΠΎΡ€Ρ‚Π°ΠΌΠΈ:
import Button from '@/shared/ui/Button'
  • ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ:
vite.config.ts

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ.

Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ зависимостСй

ПослС ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ удаляСм Π½Π΅Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚:

npm uninstall имя_ΠΏΠ°ΠΊΠ΅Ρ‚Π°

НапримСр:

npm uninstall lodash

МоТно ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ нСсколько сразу:

npm uninstall pkg1 pkg2 pkg3

ΠžΡ‡ΠΈΡΡ‚ΠΊΠ° зависимостСй

ПослС удалСния ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠ΅Ρ€Π΅ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ зависимости:

rm -rf node_modules package-lock.json
 
npm install

Π§Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Ρ‘Ρ‚:

  1. удалится старая ΠΏΠ°ΠΏΠΊΠ° node_modules
  2. удалится lock-Ρ„Π°ΠΉΠ»
  3. npm Π·Π°Π½ΠΎΠ²ΠΎ установит зависимости

Настройка ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΉ

Если depcheck ΠΎΡˆΠΈΠ±ΠΎΡ‡Π½ΠΎ считаСт ΠΏΠ°ΠΊΠ΅Ρ‚ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹ΠΌ, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅.

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ:

.depcheckrc

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

{
  "ignores": [
    "mobx",
    "mobx-react-lite",
    "vite"
  ]
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ эти ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ΅.

🎯 Π’Ρ‹Π²ΠΎΠ΄

  • depcheck ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π°ΠΉΡ‚ΠΈ лишниС npm-зависимости
  • ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ
  • автоматичСскиС Π°Π½Π°Π»ΠΈΠ·Π°Ρ‚ΠΎΡ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡˆΠΈΠ±Π°Ρ‚ΡŒΡΡ
  • TypeScript alias’ы ΠΈ динамичСскиС ΠΈΠΌΠΏΠΎΡ€Ρ‚Ρ‹ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ
  • послС чистки ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ node_modules

πŸ”— Бвязано