[React+Vite+TypeScript] try-catch! 이미지/오디오/폰트 최적화 및 vite 번들 최적화

 

안녕하세요!

 

 

지난번 최적화 과정 (https://devbyzero.tistory.com/22)
글을 쓰고 재빠르게 2탄으로 돌아왔습니다..

[React+Vite+TypeScript] try-catch! Vitest + RTL 최적화

 

최적화란 끝도 없으며,, 하기 나름이기도 하지만

이번 프로젝트는 지금 상황에서 할 수 있는 만큼 해보려고 합니다.

무엇보다 개발하면서 늘 이미지와 오디오 파일이 큰 것이 신경이 쓰였기 때문에
최적화로 줄여버리고 싶은 마음이 컸고..
귀찮음을 꾹 참고 해보겠습니다..

 

참고로 지난 최적화 이후 다른 팀원이 lighthouse로 최적화를 진행한 상황이라 최적화할 것이 많이 남지 않았습니다!
그래서 저는 남아있는 것중에서 조금 더 번들을 줄일 수 있는 것들을 더 줄여보려고 합니다 ㅋ

그래서 지난번에 vite tree-shaking는 제가 안해도 될 것 같아요.

그래도 남은 것들이 있으니, 오늘 해볼 최적화들을 먼저 알려드리자면:

 1. 이미지 최적화
2. 폰트 최적화
3. framer-motion 제거
4. Vite 번들 최적화
5. 오디오 최적화

요렇게 될것 같습니다!

 

 

자 그럼

 

 

 

📍이미지 최적화📍

 

아 먼저 빌드를 해서 확인부터 해야겠죠?

젤 위에 초록색.. 저 친구들이 다 이미지와 오디오입니다.

먼저 이미지 파일들을 화면에 띄울때 lazy로 로딩되게 수정할건데,
아래처럼 loading="lazy"를 img 태그에 넣어줍니다.

대략 한 10개의 파일정도에 이렇게 넣어줬어요.. 귀찮아서 git status로 바꾼 파일명 넣음

이건 빌드로 차이를 알 수 없어서... 그냥 이렇게만 바꿔줬다는 것만 아시길 
(chrome DevTools > Network 탭에서 이미지 스크롤될 때나 나올 때 로드되는거로 확인)

 

이어서
png 확장자를 webp로 바꿔줍니다.

이거 바꿀 때 냅다 확장자명을 png에서 webp로 바꾸는것이 아니라
(사실 귀찮아서 제가 냅다 그랬는데 안되길래 방법을 찾았어요)
이것도 모듈 설치해서 하는 방법이 있더군요?
한번 해볼게효

frontend/로 가서
npm install -g cwebp-bin 설치합니다.

 

그 다음
cwebp -q 80 [png파일경로] -o [webp로 바뀔 파일의 경로]
명령어를 실행해줍니다.
아래 이미지 보시면 됩니다

 

이제 빌드해서 얼마나 줄었는지 볼게용

 

표로 정리해보면 

...!!!

 

이미지만으로 약 10,760KB (10.5MB) 절감했어요

 

이렇게 줄어들 줄은 몰랏는데...

 

농담입니다 ㅋ

 

다음 플젝부터는 무조건 webp랑 svg 파일로만 구성할겁니다. 그럼 이런 최적화과정도 짧아질거니까요!

 

자 다음

 

📍폰트 최적화📍

 

폰트 최적화를 왜 하냐? 할 수 있는데

제가 폰트 최적화를 해야하는 이유가 있습니다..

제가 index.css에서 폰트 확장자명을 쓸 때

이렇게 썼거덩요 근데 이걸

woff에서 woff2로 2만 추가해주면 되는것임

 

이렇게 수정할겁니다.

WOFF2는 Google에서 개발한 Brotli라는 압축 알고리즘을 사용하는데,
기존 WOFF보다 용량이 보통 30%~50% 정도 더 작다고 합니다.
파일 용량이 줄어드니 서버에서 사용자 브라우저로 폰트를 보내는 속도가 훨씬 빨라지는 것!

그리고
웹사이트의 성능 지표 중 중요한 것이 LCP인데,
로딩 성능 향상 (LCP 최적화)를 진행하면
폰트 다운로드 시간 단축도 되고
폰트 늦게 뜨거나 기본폰트로 떴다가 나중에 폰트 바뀌는 현상도 최소화할 수 있어요 (렌더링 차단 방지)

그리고 지금 브라우저들이 woff2를 거의 완벽하게 지원해준다고 하니,, 바꿔야겠지요

전 이미 woff2파일이 있었는데 저렇게 써뒀던거였어요
왜냐하면

몰랐으니까

 

 

이제 알았으니까 수정함 네

 

 

그리고 이제 index.html으로 들어가서 title 위에 이렇게 적어주겠습니다.

폰트가 preload가 될 수 있도록!

 

폰트는 이것만 하면 됩니다.

 

 

 

 

📍framer-motion 제거📍

 

프론트엔트 페이지 중에 게임 결과가 성공일 때 보여주는
SuccessResult.tsx 파일이 있는데요.
여기서 사용한 framer-motion을 css로 교체한 뒤에 framer-motion 패키지를 삭제하려고 합니다.

framer-motion을 기껏 설치해서 구현했는데 왜 css로 교체하는 것인지? 할 수 있는데,
사실 framer-motion으로 구현하기 전에 이 부분들을 css로 만들어보려고 했는데
css를 너무 붙들고 있기엔.. 시간이 걸릴 것 같아서
그때 짧은 고민 끝에 framer-motion을 사용한거였거든요..
지금 최적화할 때 css로 바꿀 수 있는 간단한 부분이면 바꿔주는게 좋지 않겠습니까? ㅎ

이미 팀원이 framer-motion을 사용한 일부 파일들을 제거하고 css로 구현했는데,
제가 아예 다 지워버리겠습니다.! 

SuccessResult.tsx에서 framer-motion으로 구현된 부분을 정리해주고 index.css에 위 코드를 추가해서 사용할 수 있도록 했어요.

그리고 frontend/안에 설치된 framer-motion을 삭제합니다!
npm uninstall framer-motion

 

 

 

 

 

📍Vite 번들 최적화📍

vite 번들 최적화가 아직 남아있어서 추가 작업을 더 해줘야 하는데용
vite.config.ts에 manual chunks 설정이 없어서 
큰 라이브러리를 별도 청크 분리해주면 캐싱할때 더 효율적이라 진행해보겠습니다.

 
 이렇게용

 

 

 

 

이제 남은 것은..

📍오디오 최적화📍

 

지금 이 프로젝트에서 오디오 파일들이 .wav 확장자로 저장되어있는데요.
wav는 비압축 포맷이라 mp3로 바꾸면 크게 줄어들 것으로 예상됩니당

https://convertio.co 에 가서 프로젝트에 사용한 오디오 파일 확장자를 mp3로 바꿔서 다운로드한 뒤,
다시 프로젝트 폴더에 넣어주었습니다.

음질에는 큰 변화가 없었기 때문에 이렇게 하고 다시 빌드해보겠습니다.

 

 

 

수치들이 많이 줄었네여 정리해보면

에셋 최적화 결과

JS 번들 최적화 결과 (gzip 기준)

약 13.8 MB 감소했네요!

 

 

 

저 정말

 

 

 

 

이렇게 글로 쭉 적어보았는데용

try-catch! 프로젝트에서 제가 진행한 프론트엔드 최적화 과정을 정리해보겠습니다!

 

👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇

 

 

👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆

 

 

 

결과가 나와서 기쁩니다

 

 

최적화를 진행하면서 느낀 점은

그냥 처음 코드 작성할때부터 챙기면서 작성해도 될 부분인데 최적화 과정으로 이렇게 개선해야했을까.. 싶었습니다.
짧은 기간의 개발 프로젝트라는 핑계로 너무 하드코딩했던 것 같고,
나중에 리팩토링하고 최적화할꺼니까~ 라는 생각으로 코드를 저지경으로 뒀던게.. 아쉽네용..
발표했던 프로젝트였는데 시연화면에서 약간의 로딩과정이 있었던 기억..이 살짝 나는데
이런 부분을 미리 신경써서 코드를 작성했더라면 조금 나았을까? 싶기도 합니다.
(웹 게임 개발이었으니..)

개발 과정에서 정말 많은 예외처리와 webSocket STOMP 상태 연결 부분에서 많이 애먹었기 때문에
개발 막판으로 갈수록 하드하드코딩이 되어버렸는데 개발도 잘하지 못한 것 같아 아쉬움이 많았던 프로젝트였습니다만..
그래도 저에게 이렇게 다시 되돌아보면서 수정할 수 있는 시간이 있음에 감사해야겠습니다 ㅎ

 

 

이만 최적화 글 마치겟습니다요

 

어쩌다 마주친 이 글 읽어주셔서 감사합니다!

혹시 궁금한 점 있으시면 댓글 달아주세요! 

없어도 댓글 달아주세요 그럼