[ETC] 미사용 의존성 모듈 삭제하기

1. 수동 검사: 가장 간단한 방법은 package.json 파일을 열어서 각 라이브러리를 검토하는 것입니다. 프로젝트에서 해당 라이브러리를 사용하는지 여부를 수동으로 확인합니다. 이 방법은 시간이 많이 소요되며, 대규모 프로젝트에서는 비효율적일 수 있습니다.

2. 도구 사용:

• depcheck: depcheck는 노드 프로젝트에서 사용되지 않는 의존성을 찾아주는 도구입니다. 설치 후 프로젝트 디렉토리에서 depcheck를 실행하면 미사용 의존성 목록을 볼 수 있습니다.

npm install -g depcheck
depcheck

Unused dependencies
* @date-io/date-fns
* @mui/x-data-grid
* @types/googlemaps
* apexcharts-clevision
* bootstrap-icons
* chart.js
* cleave.js
* i18next-browser-languagedetector
* i18next-http-backend
* payment
* recharts
Unused devDependencies
* @iconify/iconify
* @types/payment
* eslint-import-resolver-alias

• npm-check: 이 도구도 depcheck와 유사하게 작동하며, 미사용 의존성을 찾을 뿐만 아니라 버전 업데이트가 필요한 의존성도 확인할 수 있습니다.

npm install -g npm-check
npm-check

3. 통합 개발 환경(IDE) 플러그인: 일부 IDE는 사용되지 않는 의존성을 찾는 플러그인을 제공합니다. 예를 들어, Visual Studio Code에는 이러한 기능을 제공하는 확장 프로그램이 있습니다.

1. Import Cost: 이 확장 프로그램은 코드에 작성된 각 import 문의 크기를 보여줍니다. 이를 통해 프로젝트에 얼마나 많은 부분이 실제로 사용되고 있는지 파악할 수 있습니다.
2. Version Lens: 패키지의 최신 버전 정보를 보여주며, 어떤 의존성이 업데이트되었는지 쉽게 파악할 수 있습니다. 비록 직접적으로 미사용 의존성을 찾지는 않지만, 프로젝트의 의존성 관리에 유용합니다.
3. Path Intellisense: 파일 경로를 자동으로 완성해주며, 잘못된 경로나 더 이상 존재하지 않는 파일에 대한 import를 찾아내는 데 도움을 줄 수 있습니다.

4. 빌드 도구의 트리 쉐이킹 기능: 웹팩과 같은 빌드 도구는 '트리 쉐이킹(Tree Shaking)' 기능을 제공하여 미사용 코드를 제거할 수 있습니다. 이는 프로젝트의 최종 번들 크기를 줄이는 데 도움이 됩니다. 트리 쉐이킹은 미사용 코드를 제거하지만, package.json 파일에서 직접 의존성을 제거하지는 않습니다.

1. ES2015 모듈 문법(ESM): 트리 쉐이킹은 ESM(import와 export)을 사용할 때 가장 잘 작동합니다. CommonJS(require와 module.exports)와 같은 다른 모듈 시스템은 트리 쉐이킹에 적합하지 않습니다.
2. sideEffects 속성: package.json 파일에서 sideEffects 속성을 false로 설정하여 해당 패키지나 모듈에 부수 효과(side effects)가 없음을 나타낼 수 있습니다. 이는 웹팩이 안전하게 미사용 코드를 제거할 수 있도록 도와줍니다.
3. Production 모드: 웹팩의 프로덕션 모드는 트리 쉐이킹을 포함한 여러 최적화를 자동으로 수행합니다. 개발 모드에서는 이러한 최적화가 일반적으로 비활성화됩니다.

// 웹팩 설정 예시
module.exports = {
  mode: 'production', // 트리 쉐이킹 활성화
  // ... 기타 설정 ...
};