웹 성능 개선: 9단계 번들 감사로 50~90% 사이즈 감소!
웹 애플리케이션(Web Application) 번들 사이즈 증가 문제를 지적하며, 64KB로 구현된 퀘이크(Quake) 게임 사례를 통해 최적화의 중요성(Optimization Importance)을 강조함
Next.js, Vite 프로젝트의 번들 사이즈를 줄이기 위한 9단계 감사(Audit) 방법론을 제시하며, 번들 분석 도구(Bundle Analyzer) 활용을 권장함
날짜 라이브러리(Date Library) 교체, 아이콘 세트(Icon Set) 최적화, 이미지 압축 등 구체적인 최적화 기법을 제시하며, 50~90% 번들 사이즈 감소(Bundle Size Reduction)를 목표로 함
IE 11 지원 중단, 코드 스플리팅(Code Splitting) 적용, 이미지 최적화 등 구체적인 최적화 방법(Optimization Techniques)을 제시하며, 각 단계별 예상 효과를 설명함
번들 사이즈 감소를 위한 지속적인 관리 방안으로 CI 환경에서의 번들 예산 설정(Bundle Budget Setting), 의존성 검토, 월간 보고서 작성 등을 제안함
번들 사이즈 분석 및 시각화 도구 활용
본문에서는 번들 사이즈 최적화를 위해 번들 분석 도구(Bundle Analyzer)를 활용하여 시각적으로 문제를 파악하는 방법을 제시한다.
Next.js 프로젝트에서는 `@next/bundle-analyzer`를, Vite 프로젝트에서는 `rollup-plugin-visualizer`를 사용하여 번들 구조를 시각화
트리맵(Treemap) 형태로 시각화된 번들 구조를 통해 각 모듈의 크기를 직관적으로 파악하고, 불필요한 의존성(Dependency)을 식별
번들 분석 도구(Bundle Analyzer)는 번들 사이즈 최적화의 핵심 도구이며, 각 단계별 최적화 효과를 검증하는 데 활용
결과적으로, 시각화된 번들 구조를 통해 최적화 대상을 정확하게 파악하고, 불필요한 코드 제거 및 효율적인 코드 분할(Code Splitting)을 수행할 수 있다.
날짜 라이브러리(Date Library) 교체 및 최적화
본문에서는 Moment.js와 같은 무거운 날짜 라이브러리(Date Library)를 가볍고 효율적인 라이브러리로 교체하는 방법을 제시한다.
Moment.js는 67KB로, 번들 사이즈 증가의 주범 중 하나이며, day.js, date-fns, 또는 네이티브(Native) `Intl.DateTimeFormat`으로 대체
date-fns는 트리 쉐이킹(Tree Shaking)을 통해 필요한 기능만 번들에 포함하여 번들 사이즈를 줄일 수 있으며, 네이티브 `Intl.DateTimeFormat`은 추가적인 번들 사이즈 증가 없이 사용 가능
Moment.js를 사용하는 코드를 찾아, date-fns 또는 네이티브(Native) API로 변경하는 과정을 통해 50~90KB의 번들 사이즈를 절감
결론적으로, 날짜 라이브러리(Date Library) 교체는 번들 사이즈 최적화의 가장 효과적인 방법 중 하나이며, 성능 개선에 기여한다.
아이콘 세트(Icon Set) 최적화
본문에서는 아이콘 세트(Icon Set)를 효율적으로 사용하는 방법을 제시하며, 번들 사이즈 증가를 막는 방법을 설명한다.
전체 아이콘 세트(Icon Set)를 한 번에 import하는 대신, 필요한 아이콘만 개별적으로 import하여 번들 사이즈를 줄임
Material UI, Chakra UI 등에서 제공하는 아이콘 세트는 전체를 import할 경우 번들 사이즈가 크게 증가하므로, 개별 import 방식을 권장
트리 쉐이킹(Tree Shaking)이 제대로 적용되지 않는 경우, 전체 아이콘 세트가 번들에 포함될 수 있으므로, 번들 분석 도구를 통해 확인
결과적으로, 개별 아이콘 import를 통해 불필요한 코드(Unnecessary Code)를 제거하고, 번들 사이즈를 효과적으로 줄일 수 있다.
코드 스플리팅(Code Splitting)을 통한 성능 개선
본문에서는 코드 스플리팅(Code Splitting)을 통해 초기 로딩 속도를 개선하는 방법을 설명한다.
동적 import(Dynamic Import)를 사용하여, 초기 로딩 시 필요하지 않은 코드를 분리하여 번들 사이즈를 줄임
Next.js의 App Router는 라우트(Route)별로 자동적으로 코드 스플리팅을 지원하며, 비핵심 페이지(Non-critical Page)에 적용하여 초기 로딩 속도를 개선
코드 스플리팅(Code Splitting)을 통해 초기 로딩 시간을 단축하고, 사용자 경험(User Experience)을 향상시킬 수 있으며, 페이지별 번들 사이즈를 줄여 전체적인 성능을 개선
결론적으로, 코드 스플리팅(Code Splitting)은 웹 성능 최적화(Web Performance Optimization)의 핵심 기술이며, 사용자 경험을 향상시키는 데 기여한다.
이미지 최적화 및 AVIF 형식 활용
본문에서는 이미지 최적화를 통해 웹 페이지의 로딩 속도를 개선하는 방법을 제시한다.
AVIF 형식을 사용하여 이미지 파일 크기를 줄이고, WebP, JPEG와 같은 다른 형식으로 폴백(Fallback)을 제공
이미지 크기를 실제 표시되는 크기에 맞게 조정하고, `<img />` 태그의 `width`, `height` 속성을 사용하여 레이아웃 시프트(Layout Shift)를 방지
`loading=lazy` 속성을 사용하여 화면 밖의 이미지 로딩을 지연시켜 초기 로딩 속도를 개선
결과적으로, 이미지 최적화(Image Optimization)를 통해 웹 페이지의 로딩 속도를 개선하고, 사용자 경험을 향상시킬 수 있으며, Lighthouse 점수 향상(Lighthouse Score Improvement)에도 기여한다.
