반응형
snowman95
코딩수련장
snowman95
전체 방문자
오늘
어제
  • 분류 전체보기 (229)
    • 앱테크 (3)
    • 옵시디언 (5)
    • 드라마, 영화 (1)
    • 개발자 이야기 (23)
    • 프로젝트 (10)
      • 프로젝트 방법론 (7)
      • 프로젝트 기록 (2)
      • Github (1)
    • 개발 지식 (0)
      • 디자인 패턴 (0)
    • 프론트엔드 개발 (5)
      • 테크트리 (2)
      • React.js (19)
      • ReactNative (2)
      • Next.js (6)
      • GraphQL (6)
      • 패키지 매니저 (2)
      • 라이브러리 (3)
      • 상태관리 라이브러리 (4)
      • Web 지식 (3)
      • HTML CSS (26)
      • Javascript (16)
      • 도구 (Tool) (3)
      • 성능 최적화 (1)
      • 디자인시스템 (0)
    • Python (53)
      • 모음집 (1)
      • 문법 (12)
      • 라이브러리 (15)
      • 알고리즘 (10)
      • 백준 문제풀이 (9)
      • 코딩테스트 (2)
      • 도구 (Tool) (3)
    • C++ (20)
      • 알고리즘 (6)
      • 삼성SW기출 (6)
      • 삼성 A형 (6)
    • 데이터사이언스 (1)
    • 인프라 (9)
      • 하드웨어 지식 (4)
      • Ansible (2)
      • Database (2)
      • 쉘스크립트 (1)
    • 주식 (0)
    • 취업 준비 (4)
      • 취업 이야기 (0)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • A형
  • 면접
  • 백준
  • 전공요약
  • C++
  • 나의 해방일지
  • 삼성SDS
  • 전공 요약 #네트워크
  • GraphQL
  • 오블완
  • 공간복잡도
  • 전공 요약 #운영체제
  • 언어
  • 알고리즘
  • Next.js #graphql #tailwind.css
  • 기계식키보드 #nuphy
  • 삼성SW역량테스트
  • nextjs
  • 전공 요약 #데이터베이스
  • 티스토리챌린지

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
snowman95

코딩수련장

Vite 아직 사용하지 마세요!!!
프론트엔드 개발/React.js

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

2023. 1. 28. 15:28
728x90
반응형

차세대 프론트엔드 Tool Vite

 

Vite

Next Generation Frontend Tooling

vitejs.dev

https://11001.tistory.com/211

 

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

차세대 프론트엔드 Tool Vite Vite Next Generation Frontend Tooling vitejs.dev 이 게시물은 기존에 CRA(Create-React-App) 로 구축된 프로젝트에서 vite로 마이그레이션 하는 사람들을 대상으로 한다. 글을 쓰는 현재

11001.tistory.com

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

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

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

 

개발 환경에서는 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 관련 게시물과 함께 다시 찾아뵙겠습니다.

반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드 개발 > React.js' 카테고리의 다른 글

웹 프론트엔드 유용한 링크 모음  (0) 2023.02.04
자바스크립트 모듈 & 번들러 (CommonJS, AMD, ESModule, Webpack, Rollup, Parcel, esbuild, swc, vite, turbopack)  (0) 2023.01.28
CRA를 Vite로 마이그레이션 하기  (0) 2023.01.15
리액트에서 외부 링크 관리하기  (0) 2023.01.15
리액트에서 마우스가 브라우저 창 밖에 있는지 감지하기  (0) 2023.01.15
    '프론트엔드 개발/React.js' 카테고리의 다른 글
    • 웹 프론트엔드 유용한 링크 모음
    • 자바스크립트 모듈 & 번들러 (CommonJS, AMD, ESModule, Webpack, Rollup, Parcel, esbuild, swc, vite, turbopack)
    • CRA를 Vite로 마이그레이션 하기
    • 리액트에서 외부 링크 관리하기
    snowman95
    snowman95
    (17~19) Unity/Unreal Engine 게임 프로그래머 (20~21) System Administrator ___________ (22~) React 웹 프론트앤드 개발자 __________ 깃헙 : https://github.com/snowman95

    티스토리툴바