🔨 refactor: 코드 스플리팅 및 성능 향상 작업

[bbearcookie]

🧩 이슈 번호

• close 모바일 퍼포먼스 개선 #299

✅ 작업 사항

이슈 이름은 모바일 퍼포먼스 개선이었지만.. 워낙 낮게 나와서 PC 기준으로 작업했어요 😅

• png 이미지 애셋을 webp 확장자로 변환하여 용량 감소
  • squoosh 에서 퀄리티 100%를 그대로 유지한 채 변환했어요.
• 웹 폰트 preload 적용
• Sentry 에 tree shaking 적용
• 지역 로딩 UI의 의미가 크게 없던 부분의 Suspense를 제거하고 전역에 로딩 UI 위임

👩‍💻 공유 포인트 및 논의 사항

기존 vs 변경 후

lighthouse를 돌릴 때마다 약간의 오차가 있긴 하지만, 평균 LCP가 16%정도 단축되었어요.
(추후에 더 줄여봐도 좋겠네요!)

코드 스플리팅과 관련해서

처음에 라우팅 경로 단위로 코드 스플리팅을 했었는데 오히려 점수가 낮아지는 경우도 있더라구요..
그래서 우선 라이브러리만 적용했어요.

[github-actions]

🎮 React Preview 보러가기: https://dnd-10th-4-frontend-cl44sudlg-bbearcookies-projects.vercel.app
⏰ 배포 일시: Tue May 07 2024 19:04:57 GMT+0900

[github-actions]

🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-ziudraqrpc.chromatic.com/
⏰ 배포 일시: Tue May 07 2024 19:05:32 GMT+0900

[easyhyun00]

앗 지금 확인했네요 ㅠㅠ! 이런 식으로 성능 향상 작업을 할 수 있군요! 저도 많이 배워갑니다
수고하셨습니다!