[Refactor] 번들 크기 개선 - 1

[eonseok-jeon]

Related Issue : Closes #431

---

🧑‍🎤 Summary

파일 사이즈가 좀 커서 3개로 쪼개서 올립니다!

• rollup-plugin-visualizer 설치
• lottie-react에서 lottie-web으로 library 변경
• lottie file 용량 줄이기

🧑‍🎤 Screenshot

총합쳐서 개선된 사진은 PR 3에서 확인할 수 있어요

🧑‍🎤 Comment

😈 rollup-plugin-visualizer 설치

번들 크기 분석을 위해 라이브러리 설치했어요
--dev라 실제 프로덕트에는 영향이 없어요
vite는 개발모드에선 esbuild를 최종 배포에는 rollup을 사용하기에 rollup 플러그인을 활용해야 한다 하더라고요 (호환성 문제)
그래서 가장 인기 있는 rollup 플러그인을 설치해줬어요

😈 lottie-react에서 lottie-web으로 library 변경

visualizer로 보니까 lottie react가 꽤나 많은 비율을 차지하고 있어서 이에 대한 최적화가 필요했어요
lottie-react가 lottie-web을 이용하여 구현되어 있어서
lottie-react에서 필요한 부분만 쑉샥 가져다 왔습니다

추가로 lottie-web light 버전을 사용해서 번들 크기를 좀 줄일 수 있었어요 (대략 600kb -> 300kb)

전

후

😈 lottie file 용량 줄이기

여기 사이트 이용해서 lottie file 용량을 줄여줬어요

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[lydiacho]

개선 작업 너무 좋습니다~~ 💯 💯 💯

visualizer 관련해서만 코멘트 한번 확인해주세요 ! !