오늘은 트리 쉐이킹에 대해 알아보자!
트리 쉐이킹(Tree Shaking)이란?
: 번들링 과정에서 사용되지 않는 코드를 제거해 최종 번들 크기를 줄이는 최적화 기법이다.
여기서 사용되지 않는 불필요한 코드는 Dead Code라고 불리며,
이 트리 쉐이킹은 불필요한 코드가 포함되지 않게 나무에서 필요없는 가지를 흔들어 제거하는 개념에서 유래되었다고 한다!
(말 그대로 shaking을 해 불필요한 것들을 제거하는 것이다 :))
불필요한 코드가 제거되지 않는다면 어떤 일이 일어날까?
애플리케이션의 성능은 코드의 크기와 관련이 깊다.
특히나 프론트엔드 애플리케이션의 최종 번들 크기가 클수록 여러 문제가 발생한다고 하는데...
3가지 문제를 살펴보자!
1. 로딩 속도 저하
: 불필요한 코드가 포함되면 브라우저가 더 많은 데이터를 다운로드 해야하기에 로딩 속도가 길어진다 :(
2. 앱 실행 속도 저하
: 사용되지 않는 코드까지 파싱 및 실행을 하게 되면서 앱의 성능이 저하 된다 :(
3. 디버깅 복잡도 증가
: 필요없는 코드까지 포함되어 있기 때문에 디버깅 분석이 어려워진다 :(
이러한 문제들을 트리 쉐이킹을 통해, 불필요한 코드들 제거하고 해결할 수 있다!
그렇다면..
트리 쉐이킹이 어떻게 동작할까?
트리 쉐이킹은 정적 분석을 이용해 사용되지 않는 Dead code들을 감지하고 제거한다고 한다.
이 트리 쉐이킹의 주요 순서는 아래와 같다!
1. 코드 정적 분석
: 번들러가 import된 모듈을 분석하고, export된 함수 또는 변수가 실제 코드에서 사용되는지 확인한다.
2. 사용되지 않는 코드 감지
: export된 요소들이 아무데서도 import 되지 않거나 사용되지 않는다면 Dead Code로 간주를 한다.
3. 번들 생성 시 불필요한 코드 제거
: 프로덕션(production) 빌드 과정에서 사용되지 않는 코드를(Dead Code) 번들에서 제거한다!
위의 예제 코드를 살펴보면,
utils.js 파일에서 usedFunction과 unusedFunction을 export하고 있다.
하지만 이 프로젝트 안에 utils.js 외에 main.js 밖에 없다고 쳤을 때,
이 main.js가 usedFunction만 import만 해서 사용한다면?
unusedFunction는 필요 없는 코드 즉, Dead Code로 간주가 되는 것이다.
그래서 정적 분석을 통해 이 부분을 감지하고 최종 번들에서 제거를 하게 되는 것!
위의 경우 트리 쉐이킹이 적용이 잘 되지만, 적용이 되지 않는 경우들도 있다
예시들과 함께 살펴보자!
1. CommonJS의 require
위의 코드에서는 CommonJS 문법으로 함수들을 export하고 있다.
require는 정적 분석이 어렵기 때문에 모든 코드가 번들에 포함된다고 한다...!
이렇게 적용이 안 될 경우에서는 ESM 방식의 import/export 문법으로 대체한다.
(트리 쉐이킹은 ESM 방식에서만 동작)
2. 부작용(Side Effects)이 있는 코드
부작용이 있는 코드란?
: 모듈이 로드될 때 자동으로 실행되거나 전역 상태를 변경하는 코드를 의미한다.
아래는 모듈이 로드될 때 자동으로 실행되는 코드이다.
이 파일의 logMessage를 다른 파일에서 쓰려면 import를 하게 된다.
하지만 첫번째 파일의 console.log가 모듈이 import될 때 실행이 되므로 이건 부작용이 있는 코드라고 한다!
이러한 부작용(side effects)들을 없애기 위해서는,
모듈이 import될 떄 자동 실행되는 코드를 작성하지 않기
순수 함수만 export하기
Webpack 기준으로는 package.json에서 sideEffects: false로 설정하기 등이 있다!
Side Effects가 없는 코드는 아래와 같다
이렇게 모듈 내 각 함수만을 생성해 export를 해서
import를 해와 사용하는 것이다!
그래서 트리 쉐이킹은 부작용이 없는 코드에만 적용이 되는 것이다.
이러한 트리 쉐이킹을 지원하는 번들러의 종류로는
Webpack, Rollup, Esbuild, Parcel, Vite가 있다!
이 중 Rollup, Esbuild, Parcel, Vite는 기본적으로 적용이 되지만 Webpack은 자동 적용이 되지 않는다.
Webpack은 트리 쉐이킹 활성화를 위해 webpack.config.js에서
mode: "production"을 설정을 해줘야한다.
오늘은 이렇게 트리 쉐이킹이 어떤 것인지, 어떻게 동작하는 지에 대해 알아봤다!
성능 최적화를 위해 우리가 안 보이는 뒤에서 열심히 일하고 있는 애들이 너무 귀엽다(??
참고 문서:
https://dev.to/drsimplegraffiti/importance-of-removing-dead-codes-49mi
https://stackoverflow.com/questions/45884414/what-is-tree-shaking-and-why-would-i-need-it
https://javascript.plainenglish.io/tree-shaking-simplified-optimizing-your-react-apps-for-production-519a4c8da463
