Vite 아직 사용하지 마세요!!!

차세대 프론트엔드 Tool Vite

Vite

https://11001.tistory.com/211

CRA를 Vite로 마이그레이션 하기

대단한 도구라고 여기저기서 홍보하고 좋다고 띄워줘서 신나게 마이그레이션을 준비했었습니다.

그런데 실제로 사용해보니 개발 환경과 프로덕션 환경이 너무 달라서 뒷통수를 당했습니다. 😢

결론 부터 말씀드리면 "아직은 사용하지 마세요" 입니다.

 

개발 환경에서는 esbuild, native ESM 을 사용한 개발환경에서는 엄청나게 쾌적한 개발경험을 제공한다는 것에 동의합니다.

그러나 프로덕션 환경에서는 Rollup 으로 번들링 하기 때문에  이미 webpack을 잘 사용하고 있는 상황이라면 Vite로 마이그레이션 했을때 config 설정하는데서 머리가 터집니다. 🤯 

 

실제로 Rollup config 설정을 마치고나면 Webpack 과 빌드시간이 차이가 나지 않습니다 ! 😡

당연하 소리죠.. 왜냐하면 빌드시 CommonJS, UMD 로 작성된 라이브러리 처리 등 Polyfill 처리 등 당연히 해줘야 하는 과정이 기본 Rollup 설정에는 없기 때문에 이걸 일일이 Plugin 추가해서 설정해줘야 합니다.

 

Rollup 은 라이브러리 개발용으로는 좋은 번들러가 맞습니다. 실제로도 그렇게 사용 하고 있기도 합니다. 🤔

하지만 제 경우는 대규모 프로젝트 마이그레이션이었고.

프로덕션 환경에서 터지는 버그들을 일일이 잡아낼 방법도 시간도 없어서 포기했습니다.

대부분이 Polyfill 문제일 것으로 보이네요

만약에 많은 시간을 들여서 버그를 다 수정했다고 하더라도 운영하는 동안에 마음이 그렇게 편하지 않을 것 같았습니다.

 

Webpack은 아무것도 안해도 다 해주는데 내가 굳이 이걸 비싼 시간 들여서 할 정도로 가치가 있는가?

이런 질문을 스스로 끊임없이 하다가, 들어가는 비용 대비 대단한 이득을 얻을 수 없다고 결론 냈습니다.

현업에서는 안정적인 빌드가 정말 정말 중요한데 빌드가 안정적이지 않다면 더더욱 선택하면 안되는 도구겠지요. 🙅‍♂️

 

 

그 외에 Next.js v13에 기본 탑재된 Turbopack도 검토하게 되었습니다.

Vite 와 Turbopack 은 서로서로 우리가 좋다 너희는 안좋다고 비난하는 경쟁자이긴 한데

Vite 에서 대단한 실망을 했기 때문에 Turbopack에 기대가 아주 커졌습니다.

 

Next.js v13 관련 게시물과 함께 다시 찾아뵙겠습니다.