TIL#33 Vite마저 느린 문제해결 과정

박감자·2024년 11월 4일

TIL

목록 보기

33/34

Vite도 느린 현상 (문제)

React 강의를 처음 듣고 실습할때부터 있었던 내 문제는 React 설치 시간이 정말 오래 걸린다는 것.

CRA - 10분 이상
Vite - 1~2분

물론 Vite 자체가 CRA보다는 빠른것이 보이지만 원래라면 Vite도 느려봐야 20초 이하 정도 걸려야하고 CRA도 느려도 3분 이하이다.

추가로 다른 분들은 Vite로 해도 거의 10초대였다.

왜 또 나만 이러는가...-ㅅ-...

오늘도 강의 새로 시작하며 만들 실습 프로젝트를 만들던 중

결국 또 83초가 걸려버렸다. 우선 검색한 스택오버플러우에서는 여러가지 문제 원인를 알려준다. 참고한 질문

네트워크 문제
패키지를 인터넷을 통해 다운 받는 과정을 Vite를 통해 빠르게 받는 것이므로 인터넷 속도의 문제일 수도 있다.
백그라운드 프로세스
백그라운드 프로세스가 많으면 생길 수 있는 문제로, 컴퓨터 용량, 임시 파일 공간, 켜 놓은 프로그램 등 고려할 요소가 많다
Node module 버전 문제
LTS 버전을 사용하지 않는 버전 문제일 수도 있다.

네트워크 문제

우선 집에 와이파이가 2개라 한 번 바꿔서 네트워크 시간을 측정해보았다. 사용한 커맨드는 ping google.com 구글 말고 아무 ip를 사용해도 무관하다.

처음에 프로젝트 생성시 사용한 1번째 와이파이가 느리다는 것을 알게되고 2번째가 이보다 2배 정도 빠른 것을 확인. 그래서 2번째 와이파이를 사용해서 프로젝트를 만들어 보았다.

시간은 확실히 83초에서 38초대로 줄어들었으나, 여전히 속도가 빠르다고는 할 수 없다ㅠㅠ

백그라운 프로그레스

뒤에서 실행시키고 있는 프로그램이라면 사실 크롬 밖에 없어서, 이는 내 기준 리액트 프로젝트를 생성할 때, 크롬을 잠깐 닫아놓고도 깔아보았다.

그랬더니 웬걸, 시간이 정말로 줄었다.

아니ㅎㅎ 좀 황당하긴 하지만... 크롬이 원래 저장공간을 생각보다 많이 잡아먹는 걸로 유명하긴 했지만, 이 정도였나?

24초대로 줄이긴 했으나, 이도 여전히 다른 분들과 비교했을 때 시간이 많이 걸리는 것이므로 마지막 원인까지 한 번 확인해보기로 했다.

Node 버전 확인

혹시 몰라서 체크한 버전

내가 업데이트한 날짜 기준 (2024년 10월 28일) v20.18.0이 가장 최신 LTS 버전이었다.

글을 작성하는 지금 2024년 11월 4일 기준 LTS 최신 버전은 10월 29일 날 나온 v22.11.0 라고 한다.

허나 아무리 생각해도 그러면 1주일 전에 프로젝트를 생성하려고 했을 때는 그게 최신 버전이었기 때문에 그렇게 오래 걸리면 안되는데, 그때 캡쳐한 사진에는 40초 정도 걸렸다
^ 1주일 전에 캡쳐해 놓은 사진으로 이 당시 버전은 가장 최신
근데 이리 오래 걸리는 건 이때도 마찬가지여서 버전의 문제는 아니라는 생각이 들었다. 그래서 조금 더 검색해본 결과 버전에 다운로드 속도에 영향을 미치는 경우는 드물다고 한다.

버전이 2-3년 이상 차이가 나지 않고서야 영향이 미치지 않는다고

그럼 얘는 문제가 아니네...
뭐가 문제지...
그러던 중 yarn의 버전이 최신 버전인지가 궁금해졌다.

Yarn 버전

검색해보니 최신이었다.
ㅇㅅㅇ..... 결국 원점으로 돌아온 문제
ChatGPT에게 상황을 설명 후 가능성이 있는 원인을 제시해 달라고 했다.

Yarn Cache

cache 문제도 있을 수 있다며 캐시를 지워보라고 해서 지워보았다.
yarn cache clean 이를 실행하면

캐시를 지우고 나서 새로 프로젝트를 새로 생성 해보았다. 이때 캐시가 없기 때문에 처음부터 필요한 자원을 다운 받아야 하는 탓인지 yarn create vite 프로젝트명 --template react가 평소보다 오래 걸리기도 하고 yarn도 또다시 76초 정도 걸렸다