Yarn Berry로 node_modules를 해치우자

 

서론

npm과 yarn v1이 가지고 있던 고질적인 문제점을 해결해주는 Yarn Berry의 등장!

node_modules의 큰 용량 차지, package.json에 명시되어있지 않은 패키지를 사용하는 유령 의존성 등을 해결해줄 수 있다.

 

yarn v1으로 관리되고 있던 프로젝트를 Yarn Berry를 사용하도록 migration 해보자.

 

Yarn Berry 적용하기

우선 yarn을 설치한다.

npm install -g yarn

그리고 프로젝트의 루트로 이동한 뒤 yarn berry로 변경해준다.

yarn set version berry

 

 

그리고 lockfile을 생성해준다.

yarn install

 

프로젝트에 새로운 파일들이 추가된 것을 확인할 수 있다.

 

 

 .pnp.cjs

pnp.cjs는 의존성을 확인할 수 있는 파일이다.

기존의 npm이나 yarn v1 같은 경우 의존성을 나타내기 위해 node_modules 디렉토리를 생성한다.

하지만 node_modules는 간단한 프로젝트이더라도 몇백 메가바이트에 육박하는 큰 크기를 차지한다.

뿐만 아니라 디스크 상에 있는 디렉토리이다보니 의존성을 확인하기 위해서는 수많은 디스크의 I/O 작업이 호출된다.

이러한 디스크의 I/O 작업은 굉장히 느리다.

그래서 yarn berry는 .pnp.cjs를 사용해 디스크 I/O 같이 느린 작업을 메모리 상의 자료구조로 대체하여 이를 개선한 것이다.

리액트의 경우 위와 같이 버전과 의존하고 있는 패키지 정보를 나타내 준다.

react 패키지의 버전은 무엇이며 어디에 위치하고 의존하고 있는 패키지는 다음과 같음을 한눈에 확인할 수 있다.

 

.yarnrc.yml

yarnrc는 yarn의 내부 설정을 관리하는 파일이다.

 

• yarnPath: yarn을 프로젝트 내에 설치하는데 가장 선호되는 방법으로 모든 팀원이 같은 yarn version을 사용할 수 있도록 해준다.
• nodeLinker: Node 패키지를 설치하는데 어떤 링커를 사용할지 명시하는 속성. (`pnp`, `pnpm` ,`node-modules` 가능)

 

yarn v1 혹은 npm에서 마이그레이션하는 지금과 같은 상황에서는 yarn install시에  nodeLinker: node-modules가 자동으로 추가된다.

 

Plug`n`Play (PnP) 적용하기

yarn berry는 node_modules로부터 오는 문제점을 해결하기 위해 PnP 전략을 도입했다.

결과부터 얘기하자면 PnP는 node_modules를 생성하지 않는다.

 

우선 .yarnrc.yml에서 nodeLinker 필드를 지우고 다시 yarn install 해보자.

 

위와 같이 .yarn 디렉토리 안에 cache 디렉토리를 확인할 수 있을 것이다.

이 cache 안에는 패키지의 정보가 기록된다.

새로운 패키지를 설치하면 pnp.cjs에 이 패키지를 찾을 수 있도록 하는 packageLocation을 추가해준다.

 

 

내 프로젝트에서 사용하는 animejs 패키지는 cache 디렉토리 안에 다음과 같이 저장되어있다.

그런데 자세히 보니 이 친구는 zip 파일이다.

 

yarn berry에서 패키지 정보를 zip으로 관리하는 이유는 다음과 같다.

1. 용량 대폭 감소
2. 변경 여부 확인 용이 (zip 파일의 checksum을 확인)
3. 복잡한 구조가 필요 없음.

 

용량 대폭 감소

실제로 245MB에 육박하던 node_modules를 가진 프로젝트에 yarn berry를 도입하였을 때,

 

 

cache 디렉토리는 66MB에 불과하다.

약 70% 이상의 용량을 감소시킬 수 있었다.

 

트러블 슈팅

yarn berry의 간단한 세팅을 마친 뒤 프로젝트를 실행하려고 했더니 다음과 같은 오류가 발생한다.

 

styled-components 가 react-is라는 모듈에 접근했다.

하지만 react-is는 패키지 정보가 명시되지 않았다며 이는 require호출을 모호하고 불명확하게 만든다는 에러이다.

 

peer-dependency가 명시되지 않았기 때문이다.

 

 

.yarnrc.yml에 packageExtensions 필드에 위와 같은 내용을 추가하여 해결할 수 있었다.

다시 yarn install 후 yarn start를 해보자.

 

 

성공적으로 컴파일되었다!

 

끝내며

아주 간단한 설정만 적용해서 yarn berry로 마이그레이션 해보았다.

이 외에도 yarn berry의 활용도는 무궁무진한 것 같다.

• 다양한 플러그인을 통한 yarn CLI 확장
• 강력한 workspace 제공
• 라이브러리 일부분 수정
• zero-install

아래의 글을 읽어보며 특히 모노레포 환경에서 yarn berry는 더욱 빛을 발하는 것처럼 느껴졌다.

궁금하다면 한 번 읽어보는 것을 추천한다.

https://techblog.woowahan.com/7976/

Yarn berry workspace를 활용한 프론트엔드 모노레포 구축기 | 우아한형제들 기술블로그

 

이후에는 workspace는 무엇이며 yarn berry workspace의 강력함은 무엇인지 알아볼 생각이다!