저는 개인적으로 공부하다가 최적화 이슈를 발견하게 되었습니다. 그러다 보니 어떻게 성능을 잘 개선하면 되는지 연구를 계속하게 되었습니다. 그러다 보니 저는 bundle size를 최적화를 하여 조금더 필요없는 모듈을 정리 해야되겠다는 마음이 들어 모듈을 시각적으로 표현을 도와주는 bundle-analyzer 라는 것을 발견하였습니다.
bundle-analyzer란?
우선 bundle-analyzer을 들어가기 앞서 bundle과 모듈이라는 용어는 미리 다 알고있다는 상태에서 말씀드리겠습니다. 잘 모르시겠다면, 각각 단어에 링크를 연결 해두겠습니다.
bundle-analyzer는 정확히 프론트엔드 개발에서 사용하는 도구이며, 웹 어플리케이션에서 번들 사이즈를 분석하여 시각적으로 표현을 해줍니다. 번들안에서도 모듈이 사용되는 비중이 얼마나 되는지 그리고 최적화가 필요해 보이는 부분을 시각적으로 표현 되었습니다.
위에 보시면 어떤 라이브러리를 사용하는지 그리고 용량은 얼마나 나가는지 조금 디테일하게 시각적으로 표현되다 보니 머리속으로 생각하는거 보다 직관적으로 표현이 되어 쉽게 이해할수 있습니다.
bundle-analyzer를 이용한 사례
아래에는 제가 실제로 통계 프로젝트를 하기위해서 예시로 만들어 본 사이트입니다. 그런데 서버에서 데이터를 미리 받아와서 렌더링을 해야하는데 렌더링 하는 과정 전에 너무 많은 데이터가 넘어간다는 것을 포착하였습니다.
위에는 프로젝트를 위한 임시 테스트 사이트인데요?? 여기에서 저는 antd.css가 무려 4메가 바이트를 먹는다는 것을 알게되었습니다.
심지어 저는 antd는 옛날에 사용하던 프로젝트이기도하며, material ui 프레임워크로 사용할거기 때문에 과감하게 소스 정리와 최적화를 하기 시작했습니다. 그렇게해서 아래의 결과가 나왔는데요?
눈으로 보았을때도 antd.css라는 것을 볼 수가 없습니다. 저는 이렇게 간단하게 최적화를 하였고 물론 소스를 직접적으로 수정하는 것은 쉽지는 않았지만 이렇게 눈으로 직접적으로 최적화 되었는지 빠르게 확인 할 수 있어서 좋았습니다.
이렇게 시각적으로 번들 사이즈를 확인을 할수있으며, 저는 이걸 다 직접 하나하나 찾아가면서 최적화 하는줄 알았지만, 2022년 이후로는 이렇게 최적화 신경쓰면서 개발하니 너무 좋네요 ㅎㅎ