웹에서 'Tree Shaking'이란 무엇인가요?

Q: 웹에서 'Tree Shaking'이란 무엇인가요?

번들러가 사용되지 않는(dead) 코드를 자동으로 제거하여 번들 크기를 줄이는 최적화 기법이다 Tree Shaking은 Webpack, Rollup 등의 번들러가 ES 모듈의 import/export를 정적 분석하여, 실제로 사용되지 않는 코드(dead code)를 최종 번들에서 제거하는 기법입니다. 라이브러리에서 필요한 함수만 import하면 나머지는 자동 제거되어 번들 크기가 줄어듭니다.

보통 MDN Web Docs

보기 및 정답

A 번들러가 사용되지 않는(dead) 코드를 자동으로 제거하여 번들 크기를 줄이는 최적화 기법이다

B 브라우저의 렌더링 엔진이 DOM 트리의 불필요한 노드를 자동으로 정리하여 최적화하는 기능이다

C 프로젝트의 중첩된 디렉토리 구조를 평탄화(flatten)하여 빌드 시 파일 경로를 단순화하는 기법이다

D 데이터베이스의 인덱스를 재구성(rebuild)하여 쿼리 성능을 향상시키는 서버 측 최적화 작업이다

해설

Tree Shaking은 Webpack, Rollup 등의 번들러가 ES 모듈의 import/export를 정적 분석하여, 실제로 사용되지 않는 코드(dead code)를 최종 번들에서 제거하는 기법입니다. 라이브러리에서 필요한 함수만 import하면 나머지는 자동 제거되어 번들 크기가 줄어듭니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

웹에서 'Tree Shaking'이란 무엇인가요?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

모두를 위한 진짜 쎈 바이브코딩