[React] 프로덕션 최적화: 불필요한 모듈 제거

오늘 약 5개월동안 진행한 프로젝트에서 사용하지 않는 라이브러리 제거를 진행했다.

 

웹 사이트 퍼포먼스 측정 결과, 특히 사이트 로딩 속도에서 매우 처참한 결과가 나왔기 때문이다.

 

한번에 모든 페이지를 로드하기 때문에 초기 로드에 비교적 많은 시간이 필요한 SPA의 치명적인 단점이

굳이 필요하지 않은 의존성들과 함께 존재하면

빌드의 결과물인 청크 사이즈의 비대로 인해 로딩 시간이 더더욱 길어지게 된다.

 

나는 개발 초기에 사용이 간편한 부트스트랩을 사용하다가

디자인 수정 작업을 거치면서 부트스트랩보다는 material-ui가 더 적합하다는 것을 깨달았다.

 

그러나 이미 많은 컴포넌트들에 부트스트랩이 들러붙어 있어서 상당히 손대기 어려웠다.

 

대부분의 편집기나 IDE에 존재하는 Find in Path 기능을 이용해 부트스트랩을 사용하는 컴포넌트들을 모두 찾아서 material-ui로 교체했다.

 

수정하면서 알게 된 점은 라이브러리의 굉장히 사소한 요소들 만이 사용되고 있었다는 점이다.

 

예를 들어, 내 프로젝트에서 부트스트랩이 차지하고 있던 컴포넌트는

대부분 Collapse(자식 요소를 open값에 따라 보여주거나 숨기는 컴포넌트), 폼 요소, 버튼에 국한되어 있었다.

 

사이즈가 큰 만큼, 꽤 많은 컴포넌트들이 있지만 내가 필요로 하는 기능들은 얼마 없었던 것이다.

 

이것은 꽤 큰 문제인데, 위에서도 말했던 SPA의 단점을 더욱 부각시킨다.

잠깐의 귀찮음으로 인해 빌드 시간의 증가와 사이트 로딩 속도 저하, 트래픽 증가의 문제가 연쇄적으로 발생한다.

 

문제점 파악이 끝난 후, 다음과 같은 방법으로 작업에 들어갔다.

 

1. material-ui에 포함되지 않는 bootstrap 컴포넌트는 직접 제작한다. (ex: Collapse, InputAddon)

2. material-ui에 포함되는 컴포넌트는 교체한다.

 

해당 작업 후, package.json으로 가서 현재 사용중인 모듈을 모두 확인했다.

 

지금은 제거한 상태지만, 개발 초기에 임시로 박아두었던 채팅 모듈 (sendbird)가 남아있는 것을 확인하고 그것 역시 제거했다.

 

결과적으로 세 가지의 모듈(bootstrap, reactstrap, sendbird)를 제거했다.

 

빌드를 완료 한 후(프로덕션 폴더 기준), 제거 전 용량과 비교해 보니 약 600KB가 감소하였다.

 

이 과정을 거치면서 느낀 점은 '반드시 필요한 모듈만 사용하자'는 것이다.

 

해당 모듈의 극히 일부 기능만 필요하고, 그 기능을 직접 제작할 능력과 여유가 있다면 그것은 필요하지 않은 모듈이다.

모듈 설치 전 잠시동안 진정으로 필요한 모듈인지 고민할 필요가 있다.

초기의 귀찮음으로 인해 프로젝트의 크기가 커질수록 프로덕션 용량 문제 등이 대두되면 해결에 더 많은 시간과 노력이 들어간다.

 

특히나 프로젝트 프로덕션을 하나로 묶는 웹팩은(물론 스플리팅을 할 수도 있지만)

이에 굉장히 민감하니 좋은 사용자 경험을 제공하려면 반드시 주의해야 한다.

 

조만간 Lazy Loading을 통해 청크를 더 쪼개는 작업을 진행할 것이다.

https://satisfactoryplace.tistory.com/93?category=829221 

[React] 프로덕션 최적화: 코드 스플리팅

 

++++

 

어떤 모듈이 번들 사이즈에 큰 영향을 끼치는지 알고 싶다면 아래 링크를 참조하면 된다.

 

https://satisfactoryplace.tistory.com/359

[React] webpack bundle analyzer를 이용한 번들 사이즈 최적화