[최적화] React 프로젝트 최적화 - 1. 문제점 인식 (LightHouse)

 

 

 

 

 

 

회사에서 듀얼 모니터가 되지 않던 M1 맥북을 교체해주었다. 

 

무려 M3 맥북 💻 으로!! 

(본론은 아니지만 자랑)

 

영롱하쥬?

 

 

 

전에 쓰던 맥북에서 데이터를 옮기고 업무를 하려고 전에 개발하던 리액트 프로젝트 개발 사이트를 딱 열었는데 세상에 렌더링이 너무 느린 것이다...

 

그래서 네트워크 탭을 열어서 확인해보니 빌드된 파일의 용량이 무려 23MB,,

 

사진을 빨리 띄우면 뭐하나 메인 빌드 파일이 너무 커서 뜨지를 않는데,,ㅎ 수정이 시급하다고 생각했다. 

 

 

 

어디서부터 시작해야할지 몰라 이것저것 찾아보다 LightHouse라는 구글 확장 프로그램을 이용해 사이트 성능을 측정할 수 있다는 것을 알게되었다. 이 프로그램의 좋은 점은 점수를 산출해줄 뿐만 아니라 꽤 구체적으로 개선 방안을 제시해준다는 것이다.

 

 

 

이 LightHouse 성능 측정 결과를 기반으로 개선하는 최적화 과정을 시리즈로 써볼 생각이다. 목차는 다음과 같다.

 

 

<React 프로젝트 최적화 과정>

1. LightHouse를 이용한 성능 측정

2. webpack 빌드 파일 분석 후 용량 줄이기 (webpack-bundle-analyzer)

     ...to be continue...

 

 

 

 

오늘은 그 처음, LightHouse를 이용한 성능 측정과 분석과정에 대해 담았다.

 

 

---

 

 

문제 상황: 리액트 & 웹팩 빌드 사이트가 너무 느리게 뜬다.

해결 방법: 우선 뭐 때문에 느린지 파악을 해보자! -> LightHouse 사용

 

 

 

LightHouse

Lighthouse is an open-source, automated tool for improving the quality of web pages.

 

https://developer.chrome.com/docs/lighthouse?hl=ko

등대  |  Lighthouse  |  Chrome for Developers

 

 

구글 확장 프로그램이므로 설치는 쉽다!

설치 후 주소 표시줄 옆의 퍼즐 버튼을 누르고 Lighthouse 옆의 압정 버튼을 누르면 고정이 되는데, 고정해두면 사용이 편리하니 고정을 해두자.

 

설치 후 성능 측정 하고자 하는 페이지에 들어가서 고정된 아이콘을 누르고 Generate Report 버튼을 눌러주시면 된다.

 

 

 

 

대망의 분석 결과!

 

 

 

42점,,ㅎㅎㅎ 그리고 문제점 첫번째로 나오는 텍스트 압축에 대한 내용,, 웹팩 빌드파일의 용량이 매우 크기 때문에 이를 개선하라는 조언을 확인할 수 있었다.

 

그리고 빌드 파일이 많이 줄여지고 나면  이미지 크기를 줄이는 등 다른 방법도 시도해보면 좋을 것 같다.

 

 

 

우선 가장 시급한 건 웹팩 빌드 파일의 용량을 줄이는 것이라는 실마리를 얻었으니 웹팩 빌드 과정에서 용량을 줄이면 될 것 같다!!!!

 

하 문제점을 알아내니 너무 속시원한,,🤗

 

 

 

---

 

 

언능 개선해서 점수 높이고 싶다!!!!! 

다음 편에서는 webpack-bundle-analyzer를 이용해 무려 23MB 였던 웹팩 빌드 파일을 8MB로 줄이는 과정에 대해 담아보도록 하겠다.