웹 앱의 번들 크기 줄이기

1. 웹 번들러는 번들을 어떻게 최적화할까요?

---

• 웹 번들러의 번들 분할: 코드와 코드에서 사용하는 다양한 종속성을 단일 파일로 번들하고 가능한 가장 적합하게 분할하려고 시도하는 프로세스
• 트리 쉐이킹: 프로그램에서 사용하지 않는 모듈, 코드 등을 제거
• 사이드 이펙트: 파일을 가져오기만 하고 함수를 호출하지 않아도 실행되는 동작들. 트리 쉐이킹을 진행할 때, 사이드 이펙트가 발생하지 않는지 확인 필요. 번들러에서 사이드 이펙트를 감지하여 import하는 코드를 무시해도 안전한지 판단.

2. 번들 크기 측정

---

지표

• 번들 크기
• 번들에 포함된 내용
• 번들의 진입점: 구조에 따라 index, main 등으로 시작하는 이름, 페이지 경로 이름, 템플릿 파일 이름
• Webpack을 사용할 경우, Webpack Bundle Analyzer 도구가 유용: Output 디렉토리에 각 번들과 번들에 포함된 다양한 파일 및 종속성을 시각화한 HTML 파일이 생성됨.

3. 번들 크기 문제 해결

---

ESModule 외 모듈

CommonJS 등의 모듈은 트리쉐이킹이 안됨.

∴ 번들 분석 진행 → 큰 크기의 종속성이 ESM 변형 패키지를 제공하는지 확인하여 교체.

• 확인 방법: package.json 내에 module 항목이 있는지 확인하여 ESM 형식으로 제공되지 않으면 업데이트가 있는지, 패키지 이름이 변경되어 ESM 형식 모듈이 있는지 확인

• TSConfig: module 속성을 로 설정하는 실수가 종종 있음. 이는 번들러의 실제 출력이 아닌 컴파일된 타입스크립트를 받는 중간 형식을 변경하기 때문에 같은 ESM 형식으로 변경해야함.
  
  

사이드 이펙트 없음 표시

코드에 사이드 이펙트가 없는 경우 package.json 파일에 하기와 같이 표시하므로써 더 깊이 있는 트리쉐이킹이 가능하다는 걸 번들러에 알려줌.

{
    "name": "project",
    "version": "1.0.0",
    "sideEffects": false
}

• 사이드 이펙트 명시
• 사이드 이펙트가 있지만, 어디에 있는지 정확히 안다면 속성값으로 패턴 목록을 전달

• 사이드 이펙트 패턴 값 전달 예시(웹팩)

4. 지연 로딩

---

• 가장 효과적인 최적화 방법

• 오히려 많은 문제 발생 원인이 되기도 함
  → 프로세스가 시작될 때 코드를 로드하면 사전에 로드하는 것보다 사용자 환경이 나빠짐. 따라서 지연 로드가 일어날 위치를 생각하는 것이 중요.

• 동적 import 문을 통해서 JS 코드를 지연 로드할 수 있음. 라우터 수준에서 유용하게 활용할 수 있음

import('./Module').them(module => {});

React

React.lazy, Suspense를 함께 활용해서 컴포넌트 지연 로딩을 쉽게 설정할 수 있음.

동적 import 호출은 React.lazy로 묶고, Suspense 컴포넌트 내에서 일반 컴포넌트로 사용.

const LazyViewer = React.lazy(() => import("./Viewer"));

const App = () => (
  <Suspense fallback={<Spinner />}>
    <LazyViewer />
  </Suspense>
);

React.lazy

Lazy loading