웹 성능 개선: 9단계 번들 감사로 50~90% 사이즈 감소!

Moment.js는 67KB로, 번들 사이즈 증가의 주범 중 하나이며, day.js, date-fns, 또는 네이티브(Native) `Intl.DateTimeFormat`으로 대체

date-fns는 트리 쉐이킹(Tree Shaking)을 통해 필요한 기능만 번들에 포함하여 번들 사이즈를 줄일 수 있으며, 네이티브 `Intl.DateTimeFormat`은 추가적인 번들 사이즈 증가 없이 사용 가능

Moment.js를 사용하는 코드를 찾아, date-fns 또는 네이티브(Native) API로 변경하는 과정을 통해 50~90KB의 번들 사이즈를 절감

전체 아이콘 세트(Icon Set)를 한 번에 import하는 대신, 필요한 아이콘만 개별적으로 import하여 번들 사이즈를 줄임

Material UI, Chakra UI 등에서 제공하는 아이콘 세트는 전체를 import할 경우 번들 사이즈가 크게 증가하므로, 개별 import 방식을 권장

트리 쉐이킹(Tree Shaking)이 제대로 적용되지 않는 경우, 전체 아이콘 세트가 번들에 포함될 수 있으므로, 번들 분석 도구를 통해 확인

동적 import(Dynamic Import)를 사용하여, 초기 로딩 시 필요하지 않은 코드를 분리하여 번들 사이즈를 줄임

Next.js의 App Router는 라우트(Route)별로 자동적으로 코드 스플리팅을 지원하며, 비핵심 페이지(Non-critical Page)에 적용하여 초기 로딩 속도를 개선

코드 스플리팅(Code Splitting)을 통해 초기 로딩 시간을 단축하고, 사용자 경험(User Experience)을 향상시킬 수 있으며, 페이지별 번들 사이즈를 줄여 전체적인 성능을 개선

AVIF 형식을 사용하여 이미지 파일 크기를 줄이고, WebP, JPEG와 같은 다른 형식으로 폴백(Fallback)을 제공

이미지 크기를 실제 표시되는 크기에 맞게 조정하고, `<img />` 태그의 `width`, `height` 속성을 사용하여 레이아웃 시프트(Layout Shift)를 방지

`loading=lazy` 속성을 사용하여 화면 밖의 이미지 로딩을 지연시켜 초기 로딩 속도를 개선