bundle사이즈를 줄이려면 어떻게 해야할까?

---

1. 코드 분할(Code Splitting)

코드 분할은 애플리케이션의 코드를 여러 개의 번들로 분할하여 필요한 부분만 로드하는 기술이다.

동적 임포트(Dynamic Imports)

• 필요한 순간에만 모듈을 로드하기 위해 동적 임포트(import())를 사용
• 사용자가 실제로 필요로 하는 코드만 로드해 초기 로딩 시간을 줄일 수 있음

라우트 기반 스플리팅

• 사용자가 어플리케이션의 특정 부분에 접근할 때만 해당 부분의 코드를 로드하도록 설정함
• 예를 들면 React.lazy와 Suspense를 사용하면 라우트 기반 코드 분할 구현 가능

2. 트리 쉐이킹(Tree Shaking)

트리 쉐이킹은 사용되지 않는 코드를 제거하여 번들 사이즈를 줄이는 기술이다.
최신 번들러는 주로 ES6 모듈을 사용할 때 트리 쉐이킹을 지원한다.

• 데드 코드 제거: 번들링 도구(예: Webpack, Rollup)가 사용되지 않는 코드를 식별하고 제거한다.

3. 코드 압축(Minification)

코드에서 불필요한 공백, 주석 등을 제거하고 변수 이름을 축약하여 크기를 줄이는 방법이다.
UglifyJS, Terser등을 사용하면 JavaScript 코드를 압축할 수 있다.

4. 파일 압축(Compression)

HTTP 서버에서 파일을 전송할 때 Gzip이나 Brotli 압축을 사용하여 파일 크기를 줄일 수 있다.

• Gzip: 거의 모든 브라우저와 서버가 지원하는 압축 형식
• Brotli: 더 높은 압축률을 제공하는 최신 압축 형식

5. 애셋 최적화

이미지 최적화

이미지 파일의 크기를 줄이기 위해 다양한 최적화 기법을 사용한다.

• 포맷 변경: JPEG, PNG 대신 웹포맷(WebP 등)을 사용한다.
• 압축: 이미지 파일을 압축하여 크기를 줄인다.
• 적절한 크기: 필요한 해상도에 맞게 이미지 사이즈를 변경한다.

폰트 최적화

사용하는 폰트의 범위를 최소화 하고, 필요한 글리프만 포함하도록 최적화한다.

• Subset Fonts: 필요한 글리프만 포함한 서브셋 폰트를 사용한다.
• Font Display: font-display 속성을 사용하여 폰트 로딩 전략을 최적화한다.

6. 라이브러리 최적화

라이브러리 사이즈 검토

사용 중인 외부 라이브러리의 사이즈를 확인하고, 더 가벼운 대안이 있는지 고려한다.

필요한 부분만 임포트하기

전체 라이브러리 대신 필요한 모듈이나 함수만 임포트해 사용한다.

사용하지 않는 라이브러리 삭제

패키지 매니저(예: npm, yarn)를 사용하여 프로젝트에서 사용되지 않는 라이브러리를 제거한다.

7. 모듈 번들러 최적화

모듈 번들러(Webpack, Rollup 등)의 설정을 최적화하여 번들 크기를 줄인다.

• Webpack: Webpack의 splitChunks 옵션을 사용하여 코드를 분할한다.
• Rollup: 사용되지 않는 코드와 모듈을 제거하는 설정을 적용한다.

8. CSS최적화

사용되지 않는 CSS제거와 CSS압축을 통해 스타일시트의 사이즈를 줄일 수 있다.

9. Lazy Loading

필요할 때만 리소스를 로드하는 방법이다.
예) 스크롤 시점에 이미지를 로드하는 방식

10. 캐싱 전략 활용

변경되지 않는 리소스에 대해 캐싱 헤더를 적절히 설정해 사용자가 동일한 리소스를 반복해 다운받지 않도록 한다.