[Refactor] sprinkles 제거

[rtttr1]

📌 Related Issues

• close [Refactor] 성능 개선 #666

✅ 체크 리스트

• PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
• 빌드가 성공했나요? (pnpm build)
• 리뷰어와 라벨을 지정했나요?

📄 Tasks

• sprinkles 제거
• vite-bundle-visualizer script 명령어 추가
  • pnpm analyze로 번들 분석 가능

⭐ PR Point

배포를 대비해 번들을 좀 분석해 최적화를 해보고자 해요.

초기에 받아오는 번들인데요, 딱봐도 거대해서 뭔가 문제가 많아 보여요.
특히 가장 먼저 눈에 띈 부분은 sprinkles.css가 아래와 같이 무려 5.57%의 번들을 잡아먹고 있다는 점이에요.

제가 옛날에 추가한 이 sprinkles가 사실 상당히 잘못된 방법인거죠.

    width: [...numberArray, ...percentArray],
    height: [...numberArray, ...percentArray],
    margin: numberArray,
    marginTop: numberArray,
    marginBottom: numberArray,
    marginRight: numberArray,
    marginLeft: numberArray,
    padding: numberArray,
    paddingTop: numberArray,
    paddingBottom: numberArray,
    paddingRight: numberArray,
    paddingLeft: numberArray,

이 12개의 속성들에 1~375 까지의 값을 다 넣어주었으니 12 * 375 = 4500 개의 css class를 만들어야해요.
그로 인해 위와 같이 매우 큰 용량의 덩어리가 생긴거에요.

이에 저는 과거의 저의 과오를 씻고자 열심히 sprinkles를 지워주었답니다. (물론 cursor가 슥삭 해주긴 했어요)

제거를 해주었더니 정확히 sprinkles.css 크기인 289.6kb 만큼 초기 번들 크기가 줄어들게 되었어요.

• sprinkles 제거 전 초기 번들

• sprinkles 제거 후 초기 번들

이로 인해 최종적으로 production, 모바일 환경에서 LCP 지수가 무려 1초나 개선되었어요.

• sprinkles 제거 전

• sprinkles 제거 후

📷 Screenshot

🔔 ETC

[github-actions]

✅ Storybook 배포 완료! 🔗 https://67e4fd1fd2c7078dceec04a4-lfqhgxbyyb.chromatic.com/

[constantly-dev]

미뤄온 작업을 규홍님이.. 최고 👍
양 많았을텐데 너무 수고하셨습니다!!! 다만 바뀐 code change가 많아서 혹시 모르니 로컬에서 쭉 플로우 돌려보면서 이상한 스타일 없는지 한번만 확인 부탁드립니다~

번들 시각화 도입해주신 것도 좋네요! 추가로 올려주신 작업이랑 build 할 때 warning 뜨는 내용 참고해볼 때 manualchunks 등 옵션으로 청크 나누는 것도 좋을 것 같아요!
이후에 따로 담당자 정해서 작업하면 될 것 같습니다~

[hansoojeongsj]

⭐⭐⭐⭐⭐

[hansoojeongsj]

두개당

[hansoojeongsj]

style을 * as로 가져오지 않기로 한 것도 전부 지켜 주셨네요 짱짱