1. 트리 쉐이킹이란? 🌳✨
- 트리 쉐이킹은 사용하지 않는 코드를 제거해서 최종 파일을 가볍게 만드는 기술이에요.
- “나무(tree)를 흔들면 낙엽(leaves)이 떨어지는” 모습처럼, 코드에서도 “안 쓰는 부분만 털어내는” 과정을 생각하면 돼요.
- ES2015 모듈(import/export) 방식을 기반으로 동작하며, 대표적인 번들러들이 이 기능을 지원해요.
2. 사이드 이펙트(Side Effect)란? 🎭
- 사이드 이펙트는 모듈을 불러오기만 해도 외부 상태나 화면에 변화를 일으키는 코드입니다.
- 예를 들어, 파일을 import 하는 순간 데이터베이스에 접근하거나 전역 변수를 바꾸는 경우가 해당돼요.
- 순수한 로직(pure function)처럼 “입력값만 가지고 결과값을 내는” 코드와 달리, 사이드 이펙트가 있으면 번들러가 “이 모듈이 필요할지도 몰라”라고 판단해서 제거하지 못할 수 있어요.
3. 트리 쉐이킹 장점 😊👍
1. 번들 크기 줄이기
- 안 쓰는 코드를 제거해 주니까 최종 파일이 훨씬 작아져요.
- 예시: 라이브러리 중 일부 함수만 쓰면, 나머지는 배포 파일에 포함되지 않아요.
2. 로딩 속도 개선
- 파일 용량이 작아지면 웹페이지 로딩이 빨라져요.
- 사용자들이 “사이트가 빨리 열린다”라고 느끼면 만족도가 높아집니다.
3. 코드 관리의 명확성
- 어떤 코드가 실제로 사용되는지 분명해지니까, 불필요한 코드가 쌓이지 않아요.
- 협업 중에도 “이 부분은 왜 남아 있지?” 하고 쉽게 확인할 수 있습니다.
4. 트리 쉐이킹 단점 😅👎
1. ES 모듈 방식만 지원
- 반드시
import/export를 사용해야 해요. - 예전
require/module.exports방식으로 작성된 코드에서는 제대로 동작하지 않을 수 있어요.
2. 사이드 이펙트가 있는 코드 제외 안 될 수 있음
- 코드 안에 외부를 바꾸는 동작이 있으면, 번들러가 “언제 쓰일지 몰라”라고 생각해 제거를 하지 않아요.
- 이때는 모듈을 순수 로직(pure)으로 분리하거나,
package.json에서 사이드 이펙트 설정을 적절히 해줘야 합니다.
3. 설정 복잡도 증가
package.json에"sideEffects": false등을 적어 주어야 해요.- 이 설정을 안 하면 번들러가 “모든 파일은 사이드 이펙트가 있을 수 있다”라고 간주해 일부 코드를 남길 수 있어요.
5. 사이드 이펙트 장점 & 단점 😊👎
- 장점
- 1. 필요한 동작(사이드 이펙트)을 보장
- 예를 들어, 페이지가 로드될 때 특정 설정을 초기화해야 한다면 사이드 이펙트가 꼭 필요합니다.
- 화면에 “환영합니다”를 자동으로 표시하거나 전역 상태를 세팅하는 코드가 여기에 해당해요.
- 1. 필요한 동작(사이드 이펙트)을 보장
- 단점
- 1. 트리 쉐이킹 방해
- 사이드 이펙트가 있는 모듈은 번들러가 “혹시 사용될지도 몰라”라고 남겨 놓아서 최적화에서 빠질 수 있어요.
- 2. 예측이 어려움
- 코드가 로딩되는 순간 외부 상태를 바꾸면, 언제 어떤 순서로 동작할지 정확히 알기 어렵습니다.
- 디버깅이나 유지보수가 복잡해질 수 있어요.
- 1. 트리 쉐이킹 방해
6. 왜 꼭 사용해야 할까? 🎯
1. 빠르고 가벼운 웹페이지
- 트리 쉐이킹 덕분에 배포 파일 크기가 작아지고, 페이지 로딩 속도가 빨라집니다.
- 사용자들이 기다림 없이 사이트를 사용할 수 있어요.
2. 서버 트래픽 비용 절감
- 작은 파일을 전송하면 서버에서 소비하는 네트워크 비용도 줄어듭니다.
- 결국 비용과 시간을 모두 아낄 수 있어요.
3. 불필요한 코드 관리
- 프로젝트가 커지면 안 쓰는 코드가 쌓이게 되는데, 트리 쉐이킹은 자동으로 정리해 줍니다.
- 협업할 때 “이 코드 어디 쓰이는 거야?”라는 고민이 줄어듭니다.
7. 실제 사용 방법 🌐
7-1. Webpack
- 프로덕션 모드(
mode: "production")로 빌드하면 자동으로 트리 쉐이킹을 시도합니다. package.json에 아래의 코드를 추가하면, “이 프로젝트 안에는 사이드 이펙트가 없다”라고 Webpack에 알려줘서, 쓰이지 않는 파일을 더 적극적으로 제거할 수 있어요.
{
"sideEffects": false
}- 공식 문서:
7-2. Rollup
- ES 모듈 기반으로 처음부터 트리 쉐이킹을 염두에 두고 설계되었습니다.
rollup.config.js에서treeshake옵션을 조정하여 세부 설정이 가능합니다.- 공식 문서
7-3. Vite
- 내부적으로 Rollup을 사용하므로, Vite로 빌드할 때도 트리 쉐이킹이 자동 적용됩니다.
vite.config.js에서build.rollupOptions옵션을 통해 사이드 이펙트 제외 대상 등을 설정할 수 있어요.- 공식 문서
8. 정리 ✨
- 트리 쉐이킹
- 나무 흔들듯 “쓰지 않는 코드만 털어내는” 최적화 기술
- 장점: 파일 크기 감소, 로딩 속도 개선, 코드 관리 명확화
- 단점: ES 모듈 필요, 사이드 이펙트 포함 모듈은 제외하지 못할 수 있음
- 사이드 이펙트
- 모듈 실행 시 화면이나 데이터에 영향을 주는 행동
- 장점: 꼭 필요한 동작(예: 초기화, 로그 남기기)에 필수
- 단점: 트리 쉐이킹 방해, 예측/디버깅 어려움
- 왜 써야 할까?
- 빠르고 가벼운 웹페이지
- 서버 트래픽 비용 절감
- 불필요한 코드 자동 정리
- 참고 설정
package.json에"sideEffects": false또는 특정 파일만 제외 지시- Webpack, Rollup, Vite 등 주요 번들러에서 자동 지원
9. 출처 (References) 📚
1. Webpack 공식 문서
2. Rollup 공식 문서
3. Vite 공식 문서
4. MDN – 사이드 이펙트 설명
5. 블로그 아티클
- “Practical Tree Shaking” (검색어 예시)
- “Tree Shaking with Side Effects” (검색어 예시)
바렐(Barrel)을 공부하다가 나온 모르는 단어들을 정리해보았습니다!
이 글이 프로젝트 최적화나 웹사이트 성능 개선에 도움이 되었기를 바랍니다! 😊
