[FE] 리소스를 최적화하고, 번들 크기를 줄여요 :)

[Yoonkyoungme]

이슈 요약

리소스 최적화를 통해 JS, CSS, 이미지, 폰트 파일의 크기를 줄여 번들 사이즈를 줄이고 로딩 속도를 개선하고자 합니다.

상세 작업 내용

• JS 리소스 크기 줄이기: 현재 bundle.js 파일 크기가 3.9MB인 것을 줄입니다.
• CSS 리소스 분리: MiniCssExtractPlugin을 사용해 CSS 파일을 번들에서 분리합니다.
• JS 파일 압축 방식 변경: gzip에서 br로 압축 방식을 변경하여 성능을 향상시킵니다.
• 이미지 최적화: 번들에 포함된 SVG 컴포넌트를 최적화하거나 이미지 리소스 확장자를 변경하여 번들 크기를 줄입니다.
• 사용하지 않는 폰트 제거: 폰트 서브셋을 적용해 필요 없는 폰트를 제거하고 폰트 파일 크기를 줄입니다.

레퍼런스

모모 성능 개선 레포트