JavaScript Bundle Diet

1. 번들 분석 — 문제 진단부터 시작하라

최적화 전에 현재 상태를 정확히 파악해야 합니다. webpack-bundle-analyzer는 번들 내 파일을 트리맵으로 시각화해 가장 큰 라이브러리를 한눈에 보여줍니다. Bundle Phobia(bundlephobia.com)에서 각 패키지의 사이즈와 대안 패키지를 확인할 수 있습니다. 최적화 전후 사이즈를 수치로 비교하면 팀 설득과 PR 검토에도 유용합니다.

핵심 용어

2. Tree Shaking의 원리와 실패 원인

Tree Shaking은 사용하지 않는 코드를 정적 분석으로 제거하는 기법입니다. 동작하려면 두 가지가 필요합니다: (1) ESM 형식(import/export) — CommonJS require()는 동적 로딩이라 정적 분석 불가, (2) package.json의 `sideEffects: false` 설정 — 없으면 모든 파일을 사용한다고 가정. 자주 실패하는 이유: Babel이 ESM을 CommonJS로 변환할 때, 라이브러리가 `sideEffects` 미설정일 때, lodash(CommonJS) 대신 lodash-es(ESM)를 써야 하는 이유가 여기에 있습니다.

핵심 용어

3. 중복 라이브러리 제거

npm의 중첩 설치 구조로 같은 패키지의 다른 버전이 번들에 중복 포함될 수 있습니다. 예: 패키지 A가 react@17, 패키지 B가 react@18을 peer dependency로 가지면 두 버전이 모두 번들에 포함됩니다. `npm dedupe`나 `yarn-deduplicate`로 버전을 통일하고, Webpack의 `resolve.alias`로 특정 패키지를 하나의 버전으로 강제 지정할 수 있습니다. 진단: `npm ls [패키지명]`으로 중복 설치 여부를 확인하세요.

핵심 용어

4. 코드 스플리팅과 프리페치 전략

Next.js는 자동으로 페이지별 청크를 분리합니다(framework/commons/pages). 추가로 dynamic import()로 무거운 라이브러리를 특정 인터랙션 시점에만 로드할 수 있습니다. Webpack magic comment `/* webpackPrefetch: true */`를 쓰면 현재 청크 로드 완료 후 브라우저 유휴 시간에 미리 다운로드합니다. Prefetch vs Preload 차이: preload는 현재 페이지에 곧 필요한 것(높은 우선순위), prefetch는 다음에 필요할 것(낮은 우선순위)입니다.

핵심 용어

Q1. Tree Shaking이 제대로 동작하지 않는 주요 원인과 해결 방법을 설명해 주세요.

힌트

[감점 답변] 정의만 반복하거나 "Tree Shaking이 제대로 동작하지 않는 주요 원인과 해결 방법을 설명해 주세요."에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 세 가지 원인을 순서대로 설명하세요: (1) CommonJS 모듈 형식 — ESM이어야만 정적 분석이 가능하다, (2) sideEffects 설정 누락 — 모든 파일을 사용한다고 간주한다, (3) Babel의 ESM→CJS 변환 — tsconfig나 babel 설정 확인 필요. lodash→lodash-es 교체가 대표적인 해결 사례라는 점도 언급하면 실무 경험이 드러납니다.

Q2. 번들 사이즈 분석과 최적화 과정을 처음부터 설명해 주세요.

힌트

[감점 답변] 정의만 반복하거나 "번들 사이즈 분석과 최적화 과정을 처음부터 설명해 주세요."에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 진단→원인 파악→해결 순서로 설명하세요: webpack-bundle-analyzer로 큰 라이브러리 식별 → Bundle Phobia로 경량 대안 확인 → Tree Shaking/코드 스플리팅/중복 제거 중 해당 방법 적용 → 최적화 전후 수치 비교. 구체적인 수치(예: 500KB→200KB)를 들면 답변이 더 설득력 있습니다.

Q3. 코드 스플리팅을 적용할 때 사용자 경험에 미치는 트레이드오프는 무엇인가요?

힌트

[감점 답변] 정의만 반복하거나 "코드 스플리팅을 적용할 때 사용자 경험에 미치는 트레이드오프는 무엇인가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 초기 로딩 속도는 향상되지만 코드 분기점(라우트 전환, 다이얼로그 오픈 등)에서 추가 네트워크 요청이 발생한다는 점을 설명하세요. 이를 해결하기 위해 prefetch로 미리 다운로드하거나, 중요 경로(critical path)는 초기 번들에 포함시키고 부가 기능만 분리하는 전략을 설명하면 좋은 답변이 됩니다.

Q4. prefetch와 preload의 차이는 무엇이고 각각 언제 사용하나요?

힌트

[감점 답변] 정의만 반복하거나 "prefetch와 preload의 차이는 무엇이고 각각 언제 사용하나요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 우선순위 차이로 설명하세요: preload는 현재 페이지에서 '곧' 필요한 리소스(높은 우선순위, 같은 페이지 내 폰트나 이미지), prefetch는 '다음 탐색'에 필요할 것으로 예상되는 리소스(낮은 우선순위, 다음 페이지 JS 청크). Webpack magic comment 예시와 함께 설명하면 구체적인 답변이 됩니다.

Q5. Next.js 프로젝트에서 번들 사이즈를 줄이기 위해 실제로 어떤 작업을 하셨나요? (또는 어떻게 하시겠나요?)

힌트

[감점 답변] 정의만 반복하거나 "Next.js 프로젝트에서 번들 사이즈를 줄이기 위해 실제로 어떤 작업을 하셨나요? (또는 어떻게 하시겠나요?)"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 경험이 없다면 '어떻게 하겠는가'로 대답하면 됩니다. next/bundle-analyzer 설정 → 가장 큰 라이브러리 확인 → dynamic import()로 무거운 컴포넌트 분리 → sideEffects 설정 점검 → 빌드 후 `next build` 출력의 각 페이지 번들 사이즈 비교 순서로 설명하면 체계적인 답변이 됩니다.