pnpm + Vite 도입하기

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

Yarn에서 pnpm으로

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

webpack에서 Vite로

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

적용 중 마주친 이슈

pnpm

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

Vite

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

미해결 이슈들

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

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

적용 결과

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

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

참고 자료

• pnpm 공식 페이지
• Vite 공식 페이지
• vitejs/vite · Discussion #5912
  global is not defined 오류 해결을 위해 참고한 링크입니다.
• react-virtualized · Issue #1632
  해당 라이브러리 사용 시 에러 해결을 위해 참고한 링크입니다.