npm에서 pnpm으로 마이그레이션 하기

프로젝트를 할 때 항상 프론트는 빌드 속도와 배포 속도가 느렸다. 16초 걸릴 때도 있었다... ㄷㄷ

이번 프로젝트를 할 때 한주 팀장님이 pnpm에 대해 알려주어서 한번 적용해 보기로 해봤다!

 

pnpm이 뭔지 설명하기에 앞서

패키지 매니저?

패키지 매니저란 개발에 필요한 다양한 패키지를 설치하고 또 수정하고 업데이트하는 등의 작업을 편리하게 도와주는 도구다. 프로젝트에 필요한 외부 라이브러리, 모듈, 플러그인 등을 손쉽게 설치하고 관리하는 역할을 한다.

 

즉, 의존성 관리 도구라고 생각하면 된다.

대표적으로 지금까지 내가 사용해 왔던 npm, yarn 등이 있다. pnpm 역시 패키지 매니저이다!!

 

 

 

pnpm?

pnpm은 npm의 의존성 문제를 해결한 패키지 매니저다. npm과 달리 의존성을 공유하여 저장 공간을 최적화한다.

 

또한, 동시 설치 기능을 지원하여 의존성 설치 속도를 향상시킨다. pnpm을 사용하면 프로젝트별로 node_modules에 매번 패키지를 설치했던 것과는 달리 global 저장소에 패키지를 한 번만 저장함으로써 저장 공간을 절약할 수 있다. 

 

예를 들어서 리액트 프로젝트 10개가 로컬에 있다고 쳐보자. 기존 npm을 사용하는 경우,  10개의 프로젝트 내부의 node_modules 디렉토리에 각각 리액트 라이브러릴 모두 설치한다. 결과적으로 로컬 하드 디스크에는 실질적으로 똑같은 파일이 설치되는 것이다. 하지만 pnpm을 사용하게 되면 global 저장소인 ~/.pnpm-store에 모든 패키지를 저장하는 저장소를 두고, 중복된 패키지는 한 번만 설치한다. 중복된 의존성에서 같은 패키지를 사용하는 경우에는 파일을 중복으로 설치하는 대신 이 주소를 이용해서 하드 링크를 만들어 연결한다. 그래서 저장 공간을 절약할 수 있는 것이다!!

 

자 이제 pnpm으로 바꿔보자!!

 

일단 npm으로 pnpm 설치

npm i -g pnpm

 

// node_modules 제거
npx npkill

// package-lock.json으로 pnpm-lock.yaml 파일을 생성
pnpm import

// package-lock.json 삭제
rm ./package-lock.json

// 의존성 설치
pnpm install

 

이렇게만 해주면 마이그레이션 완료 ~~

사실 프로젝트 초기에 마이그레이션 해서그런가 속도 개선에 큰 차이는 못 느꼈다.. 다음 프로젝트 진행할 때는 pnpm 붙이기 전과 후를 한번 번 비교해 봐야겠다. 

 

pnpm 공식 문서

https://pnpm.io/ko/