[하루메이트] 리팩토링 - 초기 로딩 속도 줄이기 ver.1

 

Intro

무사히 프로젝트를 끝냈지만 아직 리팩토링 할 것이 산더미였습니다.

리팩토링을 해야할 것들 중에서 오늘은 초기 로딩 속도를 조금 줄여보았습니다.

 

---

왜?

평소 저희들이 쓰는 인터넷 속도나 와이파이 속도에서는 느리다 라는 느낌을 받지 못했습니다.

하지만 공용 와이파이를 사용하거나 네트워크 탭을 켜고 제한없음에서 빠른 3G로 변경했을 경우에 상당히 느리게 로딩이 되고 있었습니다.

보통은 다들 속도가 빠른 환경에서 웹을 이용하고 있기 때문에 굳이 여기서 줄일 필요가 있을까? 라는 생각이 들었었지만 그래도 느린 환경이 분명히 존재하고 있고, 어딘가 하자가 있다는 것이 굉장히 신경이 쓰였기 때문에 로딩 속도를 줄여보기로 마음 먹었습니다.

 

---

본론

React.lazy와 Suspense로 코드 분할을 하여 나름대로 조금 줄였다고 생각했었는데 네트워크 탭을 살펴보니 아예 다른 이유가 있었습니다.

작업 전 속도 (빠른 3G)

사용하지 않는 Icon 컴포넌트들과 Button 컴포넌트들이 초기 로딩시에 잔뜩 불러와지고 있었습니다.

 

왜 그런가 하니...

Icon index.ts

Button index.ts

저희는 Button과 Icon 컴포넌트들을 각 index.ts에서 한꺼번에 관리하고 있었습니다.

CategoryButton만 초기에 불러와준다고 치면 저것만 가져와야하는데 index에 있는 모든 버튼들을 가져와서 읽었던 것입니다.

Button과 Icon 컴포넌트가 꽤 많기 때문에 상당히 불필요한 작업들이 처리되고 있던 것이었습니다.

 

그래서 index 파일을 삭제하고 모든 경로들을 수정해주었습니다.

 

작업 후 속도 (빠른 3G)

작업 후에 네트워크 탭을 확인해보니 3초 내외로 줄어든 모습을 확인할 수 있었습니다.

 

---

마무리

사실 일반 사용 환경에서는 크게 티가 안나긴 했습니다.

그래도 느린 환경에서라면 3초 정도는 유의미한 시간이라고 생각합니다. 나름 뿌듯하네요 ㅎㅎ