📚 Reference

📜 Chapter

‣

‣

‣

‣

ESM (ECMAScript Modules)

‣

Tree-shaking

Tree-shaking
트리세이킹
트리쉐이킹
front-end 빌드/번들 과정에서 안 쓰는 코드(dead code)를 자동으로 제거하는 최적화
안 쓰는 코드 제거하여 최적화한다.
사용하지 않는 코드를 제거하여 번들 크기를 줄이는 아주 유용한 기술이지만, 모든 상황에서 완벽하게 작동하는 것은 아니다.
개발자가 의도한 대로 최적화가 이루어지지 않거나, 오히려 예상치 못한 문제를 일으키는 몇 가지 단점과 한계가 있다.

장점

번들 크기 감소 (Bundle Size Reduction)

프로젝트에 포함된 수많은 라이브러리 중 실제로 사용하는 함수나 컴포넌트만 골라내어 최종 결과물에 포함시킨다.
효과: 수천 줄의 코드가 담긴 라이브러리에서 단 한 줄의 함수만 쓴다면, 나머지 불필요한 코드는 모두 제거되어 파일 용량이 획기적으로 줄어든다.

로딩 및 실행 속도 향상 (Performance Boost)

웹 페이지의 성능은 브라우저가 다운로드해야 할 JavaScript 파일의 크기에 비례한다.