웹 애플리케이션의 번들(bundle) 사이즈를 줄이는 것은
로딩 시간을 단축시키고 사용자 경험을 개선하는 데 중요하다
번들 사이즈를 최적화하는 몇 가지 방법은 다음과 같다
1. 코드 분할(Code Splitting)
- 동적 임포트(Dynamic Imports)
- 필요한 순간에만 모듈을 로드하기 위해 동적 임포트(import())를 사용
- 이 방법은 사용자가 실제로 필요로 하는 코드만 로드하여 초기 로딩 시간을 줄일 수 있음
- 라우트 기반 분할
- 사용자가 애플리케이션의 특정 부분에 접근할 때만 해당 부분의 코드를 로드하도록 설정함
- 예를 들어, React에서는 React.lazy와 Suspense를 사용하여 라우트 기반 코드 분할을 구현할 수 있음
2. 트리 쉐이킹(Tree Shaking)
- 사용되지 않는 코드(데드 코드)를 제거하여 번들 사이즈를 줄인다
- 최신 번들러(예: Webpack, Rollup)는 ES6 모듈 시스템을 사용할 때 트리 쉐이킹을 지원한다
3. 라이브러리 최적화
- 라이브러리 사이즈 검토
- 사용 중인 외부 라이브러리의 사이즈를 확인하고, 더 가벼운 대안이 있는지 고려한다
- 필요한 부분만 임포트하기
- 전체 라이브러리 대신 필요한 모듈이나 함수만 임포트
- 예: lodash의 경우, 전체 라이브러리 대신 필요한 함수만 임포트
4. 애셋 최적화
- 이미지 최적화
- 이미지를 압축하고, 필요한 경우 웹포맷(WebP 등)으로 변환하여 사이즈를 줄인다
- 폰트 최적화
- 사용하는 폰트의 범위를 최소화하고, 필요한 글리프만 포함시킨다
5. 코드 압축(Minification) 및 난독화(Uglification)
- 코드를 압축하여 불필요한 공백, 주석, 이름을 줄인다
- TerserPlugin 같은 도구를 사용하여 JavaScript 코드드 압축 가능
6. CSS 최적화
- 사용되지 않는 CSS 제거(예: PurgeCSS)와 CSS 압축을 통해 스타일시트의 사이즈를 줄일 수 있다
7. 캐싱 전략 활용
- 변경되지 않는 리소스(예: 라이브러리)에 대해 캐싱 헤더를 적절히 설정하여, 사용자가 동일한 리소스를 반복하여 다운로드하지 않도록 한다
번들 사이즈 최적화는 다양한 전략을 조합하여 접근하는 것이 좋다
개발 도구와 환경에 따라 적용할 수 있는 최적화 방법이 달라질 수 있으므로,
프로젝트의 특성에 맞게 적절한 방법을 선택해야 한다
'Frontend' 카테고리의 다른 글
프로세스와 스레드 (0) | 2024.03.06 |
---|---|
객체 지향 프로그래밍 (1) | 2024.03.06 |
이벤트 루프와 태스크 큐 설명 (0) | 2024.03.06 |
로그인 처리 시 쿠키와 세션 어떻게 사용하는가 (0) | 2024.03.06 |
쿠키, 세션, 웹 스토리지 차이 (0) | 2024.03.06 |