pnpm + Vite 도입하기

2024년 4월 15일 · 약 7분

DevOps Engineer @ Allganize

pnpm + Vite

4월 말부터 약 2~3주 정도 기간 동안 기존 Yarn + webpack 4 기반의 프론트엔드 환경을 pnpm + Vite로 전환하는 작업을 수행하였습니다. 해당 작업을 하면서 찾았던 내용과 이슈들을 정리해 보려 합니다.

Yarn에서 pnpm으로

Yarn을 사용할 경우 패키지가 중복해서 저장이 되고, 실제 package.json 파일에 명시되지 않은 패키지도 사용할 수 있어 변경 당시에도 버그와 속도 문제가 있었고 항상 위험성을 가지고 있는 상태였습니다. pnpm을 통해 이러한 의존성 문제를 해결할 수 있고, 심볼릭 링크(Symbolic link)를 사용하기 때문에 실제 패키지는 물리적으로 1번만 저장되어 디스크 사용을 절약할 수 있습니다.
pnpm은 빠른 속도를 장점으로 내세우고 있습니다.
현재 프로젝트도 속도개선을 주된 과제로 삼고 있어 목적에 부합했습니다.

Vite는 번들링과 개발 환경에서 높은 속도를 자랑합니다. 실제로 최근에는 Vite로 인해 CRA의 사용률이 줄어들고 있다고 합니다. 역시 속도라는 장점이 프로젝트 목적에 부합했습니다.
사실 Vite는 비교적 최근에 등장했기 때문에 아직 기능 면에서 webpack에 비해 부족하다는 평가도 있습니다. 하지만 기존 코드는 webpack 4 기준으로 세팅되어 있어 webpack 5로 버전을 올리는 데에도 큰 공수가 들 것으로 예상되었고, 정작 실제 사용하는 플러그인도 제대로 파악되지 않은 상황이었습니다. 그래서 이 참에 Vite를 적용해 보자는 요구사항이 있었습니다.

다수의 패키지 문제가 있었습니다.
- 서로 다른 패키지에서 다른 버전의 의존성을 사용함으로 인해 충돌이 일어나 이를 resolutions 옵션으로 조정하는 과정이 있었습니다.
- pnpm에서는 package.json 파일에 명시되지 않은 패키지를 코드에서 사용할 수 없습니다. 기존 코드에서 이런 경우가 있어 해당 코드를 조정하거나, 패키지를 명시적으로 추가해야 했습니다.
그 외에도 Yarn에서는 발생하지 않았는데 pnpm에서 발생하는 런타임 에러가 있어 일부 코드를 조정했습니다.
(Hoisting, 기타 문법 등)

webpack 설정을 Vite에서도 적용해야 했기 때문에 수많은 시행착오가 있었습니다.
- Vite는 환경변수를 호출하는 방식이 다릅니다.
- webpack의 수많은 플러그인에 대한 대안도 찾아야 했습니다. 예를 들어 webpack의 HtmlWebpackPlugin처럼 변수를 주입하고 싶다면 vite-plugin-html 플러그인이 필요합니다.
- Vite는 별도 설정이 없으면 .jsx 확장자를 사용하지 않을 시 에러가 발생하여 추가 설정이 필요했습니다.
그 외에도 Vite 템플릿에 맞추어 일부 파일을 조정하고, 에러 해결을 위해 불필요 코드를 제거했습니다.

제가 프로젝트에서 곧 철수해야 하는 상황이었기 때문에 장기적으로 해결은 가능하지만 넘긴 부분도 있었습니다.

HMR이 작동하지 않는 문제가 있었는데, 조사해 보니 컴포넌트가 아닌 별도 export문을 사용하면 HMR이 작동하지 않는 문제가 있었습니다. 이는 의도된 사항이라고 합니다. (링크)
코드 전체를 검토 후 개선해야 해결할 수 있는 문제였기 때문에 단기간 내에는 해결할 수 없었습니다.
그 외에도 번들을 나누는 과정이나, 파일명 규칙 등 세세한 부분이 완료되지 않았습니다.

격리된 환경에서 진행한 프로젝트라서 정확한 데이터를 제시할 수는 없지만, 빌드 속도와 로컬 개발 환경 진입 속도가 비약적으로 빨라졌습니다. 실제 배포 후 속도도 꽤 개선되었고, 번들 사이즈도 줄어들긴 했는데 크게 체감되지는 않았습니다.

사실 이 프론트엔드 리소스의 성능 개선을 위해서는 코드 개선과 정리가 더 급한 문제라고 생각합니다만, 그럼에도 일정 수준의 성능 향상을 체감할 수 있었습니다. 앞으로는 개인 프로젝트에서도 애용해 보아야겠습니다.