yamoo9
commented
1 year ago 성능 개선을 위한 검토
페이지 별, 코드 분할(Code Spliting)이 적용되지 않았습니다. 그에 따라 엔트리 파일 크기(928.398 KB)가 상당히 큽니다. (아래 이미지 참고)
배포를 위한 빌드 과정에서 이미지 최적화(Image Optimization)가 수행되지 않았습니다. (아래 이미지 참고)
성능 개선을 위한 멘토링 가이드
코드 리뷰 및 최적화를 진행한 https://github.com/yamoo9/likelion-FEQA/issues/286#issuecomment-1504926019 답변과 같은 과정을 거쳐 최적화(리팩토링 이전 68점 → 리팩토링 이후 97점)를 수행해야 합니다.
내일(2023. 4. 13) 오후 2시 가이드방에서 LAB 18 조에게 최적화 수행 결과를 실시간 가이드 합니다. @rodwnl 님께서 시간이 된다면 참석하여 과정을 검토한 후 최적화를 수행하길 권합니다. 😃
질문 작성자
이경주
문제 상황
메인 페이지의 동네가게에서 필터 버튼을 눌렀을 때 이미지 렌더링이 늦게 발생되는 문제가 있습니다. 재렌더링이 발생할 때마다 이미지를 재호출해서 발생하는 문제라고 추측했지만 useEffect 안에 콘솔로그를 해본 결과 이미지 호출은 한 번만 발생되는 걸 파악했습니다.
이미지를 코드 상에서 불러오는 게 아닌 데이터베이스에 저장된 imgurl로 보여주는 것여서 파이어베이스 storage에 저장된 이미지를 최적화하면 해결될거라고 생각했습니다. 그래서 tiny panda로 이미지의 무게를 줄여주었고 그 결과 라이트하우스 체크 결과 점수가 미세하게 올라갔지만 렌더링 지연문제는 여전히 발생하고 있습니다. 어디를 개선해야 이 문제를 해결할 수 있을까요?
Store를 불러오는 코드의 위치는 src\pages\Home 에 UseStores(파이어베이스에서 값 가져오기), UseStoreList(가져온 값 집어넣기), UseStoreTypes(필터기능 할때 선택된 분류) 입니다.
프로젝트 저장소 URL
https://github.com/likelion-frontendo/likelion-saja/tree/main (코드) https://likelion-frontendo.github.io/likelion-saja/ (홈페이지)
환경 정보