[FE] 성능 개선할 수 있는 부분을 일부 개선

[pakxe]

issue

• close [FE] 성능 개선할 수 있는 부분을 일부 개선 #618

구현 목적

• main번들 안에 당장 불필요한 컴포넌트, 이미지 등이 함께 있어 낭비되고 있습니다.

구현 사항

✅ 용량 큰 이미지를 assets에서 제거

100KB 크기와 비슷 ~ 그 이상의 이미지들은 s3에 올리고 cloudfront로 호스팅해 접근하도록 했습니다.





그래서 api로 불러오는 이미지들은 전부 제거했어요.

s3안에서는 prod/assets안에 이미지 파일들이 존재합니다.

결론은 env에 이미지 호스팅 url을 추가하면 됩니다.

✅ lazy 로딩 적용

router에서 lazy 를 사용해 필요한 페이지를 필요한 시점에 로드하도록 했습니다.

// router.tsx

const MainPage = lazy(() => import('@pages/MainPage/MainPage'));
const HomePage = lazy(() => import('@pages/EventPage/HomePage/HomePage'));
const CreateEventFunnel = lazy(() => import('@pages/CreateEventPage/CreateEventFunnel'));
const AdminPage = lazy(() => import('@pages/EventPage/AdminPage/AdminPage'));
const AddBillFunnel = lazy(() => import('@pages/AddBillFunnel/AddBillFunnel'));
const EventMember = lazy(() => import('@pages/EventPage/AdminPage/EventMember'));
const EditBillPage = lazy(() => import('@pages/EditBillPage/EditBillPage'));
const Account = lazy(() => import('@pages/AccountPage/Account'));

✅ 로딩을 위한 react-lottie 라이브러리를 대체하는 비슷한 모양의 Lottie 컴포넌트 제작

react-lottie 라이브러리가 약 600kb로 큰 비중을 차지하고 있었어요. 만약 이 라이브러리로 각양각색 움직이는 것들을 만들었다면 두었겠지만 저희 프로젝트에서는 로딩만 존재하고 이후 추가될 것도 600kb를 감수할 정도로 많지 않다고 생각했습니다.

그래서 지금 쓰고있는 로티의 뒷배경을 날리고 GIF를 쪄낼 수 있나 생각해봤는데 불가능할 것 같아서.. 원래의 이쁜 로티를 그대로 사용하지 못했어요.

개선안으로는 지금 사용하고있는 로딩 하나만 loading.io에서 최대한 비슷 && 무료로 제작할 수 있는 로딩 이미지를 커스텀해 제작했습니다. 그리고 css로 export한 것을 컴포넌트 스타일에 맞게 어느정도 조작하여 구현했습니다.

[ ⬇️ 전 ]

371155554-9034e42b-eaf4-41ff-8352-fad6f219f957.mov

[ ⬇️ 후 ]

2024-09-26.10.07.00.mov

✅ 토스 아이콘 이미지 최적화

이미지 크기가 925kb여서 사이즈(30px*30px)와 퀄리티를 줄였습니다.
현재는 작은 크기로만 보이기 때문에 사이즈를 많이 줄였어요!

결과: 925kb -> 6kb

✅ Text컴포넌트의 layout shift

Text컴포넌트에서 발생하는 layout shift는 내용이 없을 경우 공백 \u00A0을 출력해 방지했습니다.

🎾 번들 사이즈 성능 개선 결과

로컬 기준으로 메인 번들 크기가 3.3mb -> 2.1mb로 약 36% 감소했습니다.

[ ⬇️ 전 ]

[ ⬇️ 후 ]

프로덕션 환경에서는 메인 번들 크기가 569kb → 181kb로 약 68% 감소했습니다.
[ ⬇️ 전 ]

[ ⬇️ 후 ]

고려사항

• 이미지 포맷 최적화는 안되었어요.

질문

• HDesign을 index.tsx로 불러오는게 로컬 환경에서는 약 0.2mb 크기입니다. 줄이고싶은데 변경 사항이 너무 많을 것 같네요. 해야한다고 생각한다면 고고하겠습니다.

의견 주세욧!~~

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-umzgkcxuxw.chromatic.com/

[soi-ha]

고생 많았어요 웨디ㅜ
미션과 달리 생각보다 성능개선이 어렵네요..
추가적인 성능 개선은 다음주에 더 같이 해봐요!

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-dshwhdpiym.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-bxkmpwnwnw.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-lccutrwfpi.chromatic.com/

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-gmfdwwxjvo.chromatic.com/