트리 쉐이킹이란? 개발 모드와 프로덕션 모드 차이(vite)

 트리 쉐이킹이란? 개발 모드와 프로덕션 모드 차이

 “트리 쉐이킹(Tree Shaking)”은 더 이상 선택이 아닌 필수입니다. 사용하지 않는 코드를 제거해 번들 크기를 줄이고, 웹사이트 로딩 속도를 높이는 핵심 최적화 기법이죠. Vite는 최신 프론트엔드 개발 환경에서 가장 각광받는 빌드 도구로, 트리 쉐이킹을 어떻게 다루는지 제대로 이해하면 프로젝트 성능을 한 단계 업그레이드할 수 있습니다.

---

트리 쉐이킹이란?

트리 쉐이킹은 “나무를 흔들어 죽은 잎을 털어낸다”는 의미에서 유래한 용어입니다.
자바스크립트 애플리케이션에서 실제로 사용되지 않는(Dead Code) 코드를 빌드 과정에서 제거해, 최종 번들 파일을 더 작고 빠르게 만들어줍니다.

---

Vite 개발 모드 – 네이티브 ES 모듈, 번들링 없이 빠르게!

1. 번들링 없는 개발 환경

전통적인 번들러(예: Webpack)는 개발할 때도 소스 코드를 "여러 모듈이 포함된 번들 파일들" (번들링하여)로 제공합니다.
하지만 Vite는 완전히 다릅니다.
Vite 개발 서버는 파일을 번들링하지 않고, 브라우저가 요청할 때마다 각 모듈 파일을 “그대로”(혹은 최소한의 변환만 거쳐) 전달합니다.

2. 브라우저의 네이티브 ESM 활용

현대 브라우저는 <script type="module">을 지원합니다.
즉, 브라우저가 ES 모듈을 직접 로드할 수 있다는 뜻이죠.

Vite 개발 서버는 다음과 같이 동작합니다:

<!-- Vite 개발 모드 --> 
<script type="module" src="/src/main.js"></script>

• 브라우저는 /src/main.js를 로드합니다.
• main.js 안에 import 구문이 있으면, 브라우저가 해당 모듈을 Vite 서버에 추가로 요청합니다.
• 이렇게 필요한 파일만 “실시간”으로 받아옵니다.

3. 트리 쉐이킹 대신 “요청 기반 지연 로딩”

개발 모드에서는 실제로 **트리 쉐이킹(=정적 분석 후 데드 코드 제거)**이 일어나지 않습니다.

• 대신, 브라우저가 import 구문을 따라 필요한 모듈만 서버에 요청합니다.
• 사용하지 않는 모듈은 아예 네트워크 요청조차 발생하지 않으니, 사실상 트리 쉐이킹과 유사한 효과를 얻을 수 있습니다.

정리:

• 개발 모드에서는 “트리 쉐이킹”이 아니라 “필요한 파일만 실시간으로 전달”하는 방식!
• 덕분에 Vite 개발 환경은 번들링 없이도 매우 빠릅니다.

---

Vite 프로덕션 모드 – Rollup으로 트리 쉐이킹

1. 프로덕션 빌드에서 번들링 & 트리 쉐이킹

프로덕션 빌드(vite build)를 실행하면, Vite는 내부적으로 Rollup이라는 번들러를 사용합니다.

• Rollup은 ES 모듈의 정적 구조를 분석해, 실제로 사용되는 코드만 최종 번들에 포함시킵니다.
• 사용되지 않는(dead) 코드는 완전히 제거됩니다.

이게 바로 “진짜 트리 쉐이킹”입니다!

2. 코드 분할 & 최적화

Rollup은 코드 분할(code splitting)도 지원합니다.

• 여러 개의 청크(chunk)로 나누어, 필요한 시점에만 각 청크를 로드할 수 있습니다.
• 트리 쉐이킹과 코드 분할을 함께 사용하면, 번들 크기를 20~40%까지 줄일 수 있습니다.

3. 프로덕션 모드 트리 쉐이킹 핵심 요약

• 빌드 시점에 정적 분석으로 데드 코드 제거
• 최적화된 번들 파일 생성
• ES 모듈 구조 덕분에 트리 쉐이킹이 매우 효과적

---

트리 쉐이킹을 활용하기

1. 모듈 개별 임포트 습관화

// Bad: 전체 라이브러리 임포트 (트리 쉐이킹 효과 ↓) 
import * as _ from 'lodash'; 

// Good: 필요한 함수만 임포트 (트리 쉐이킹 효과 ↑) 
import debounce from 'lodash/debounce';

2. 동적 임포트 적극 활용

// 필요할 때만 모듈 로드 
if (isAdmin) { import('./AdminPanel').then(module => { module.default.render(); }); }

---

용어 한눈에 정리

• HMR: 코드 변경 시 전체 새로고침 없이 변경된 모듈만 교체
• 번들: 여러 JS 파일을 하나로 묶은 결과물
• Rollup: Vite가 프로덕션 빌드에 사용하는 번들러
• Side Effect: 모듈이 외부에 영향을 미치는 코드(예: 전역 변수 수정)
• 코드 분할(Code Splitting): 코드를 여러 파일로 쪼개 필요할 때만 로드
• 데드 코드(Dead Code): 실제로 사용되지 않는 코드
• ES 모듈
  • 자바스크립트 표준(ECMAScript)에서 정의한 공식 모듈 시스템
  • import/export 문법 사용
  • 자바스크립트 언어 자체의 기능
• 네이티브 ES 모듈
  • 브라우저(또는 Node.js 등)가 ES 모듈을 직접 지원한다는 뜻
  • 예전에는 브라우저가 ES 모듈을 지원하지 않아 번들러(Webpack 등)가 필요했지만,
    지금은 <script type="module">로 브라우저가 바로 ES 모듈을 실행할 수 있음
  • Node.js도 최근 네이티브 ES 모듈을 지원함

---

결론

• Vite 개발 모드: 번들 없이 네이티브 ES 모듈로 빠른 개발 경험, “필요한 파일만” 실시간 전달
• 프로덕션 모드: Rollup 기반 트리 쉐이킹과 코드 분할로 최적화된 번들 생성

---

참고:

• Vite 공식 문서
• Rollup 공식 트리 쉐이킹 설명
• MDN ES Modules