tree shaking의 개념 및 주의사항 같은 사용방법

어느날 마주한 한 커밋 내용 'tree shaking'을 위한 수정. tree Shaking이 뭐지?

 

Tree Shaking

tree shaking이란 나무를 흔든다는 뜻을 그대로 적용시켰다고 할 수 있다. 나무를 흔들었을 때, 약한 나뭇잎들이 떨어지고 알짜만 남듯 실제로 사용하지 않은 코드들은 제하고, 사용되는 코드들만 빌드시킨다는 의미이다. 'build'에서 알 수 있듯이 이는 webpack에 들어있는 기능이다.

예를들어 

import * from './utils';

라는 코드가 있다. 하지만 import 한 곳에서 utils 안에 있는 것 중에 하나만 사용한다면? 굳이 모든 코드를 다 불러서 import 시켜야할까? 이러한 경우를 해결해 주는 방법이 tree shaking이라고 할 수 있다.

하지만 저렇게 심플하고 단순해 보이는 설명과는 다르게 이를 구현하기 위해서는 상당히 복잡한 과정이 필요한 것 같다.

 

Babel로 ES6 모듈이 CommonJS 모듈로 변환되지 않도록 하기

Babel은 앱을 개발할 때 없어서는 안 되는 기능이다. 바벨을 잘 모르시는 분은 다음 포스팅을 참고하면 좋을 것 같다-!

https://hyermione.tistory.com/13

[김민태] 02 JS 그리고 TS - Babel(바벨)이란?

꼭 필요한 babel이지만 tree shaking을 어렵게 만들기도 한다. Babel이 변환하는 문법 CommonJS 모듈 중에는 import를 require로 바꾸어주는 것도 포함이 되는데, require은 export하는 모든 모듈을 가지고 오고, webpack은 어떤 모듈을 제거해서 빌드해야하는지 파악 할 수 없다.

babel 설정을 다음과 같이 수정해 주면 모든 모듈의 변환을 막을 수 있다.

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ]
}

 

side effect

tree Shaking 뿐 만 아니라 코드를 수정 할 때 마다 신경써야 하는 것은 바로 이 side Effect 부분이다.

let fruits = ["apple", "orange", "pear"];

console.log(fruits); // (3) ["apple", "orange", "pear"]

const addFruit = function(fruit) {
  fruits.push(fruit);
};

상단의 코드는 어떤 문제를 일으킬까? addFruit는 함수 스코프 밖의 fruits 배열에 fruit를 하나 추가해주는 함수이다. 실제로 addFruit 함수가 사용되지 않는다고 하여도 함수 외부의 어떤 것을 변경한다고 인지되어 있기 때문에 side effect를 발생시키는 함수가 되어 tree shaking이 불가하다.

이때 다음과 같은 설정

{
  "name": "webpack-tree-shaking-example",
  "version": "1.0.0",
  "sideEffects": false
}

혹은 다음과 같은 설정으로 해결할 수 있지만

{
  "name": "webpack-tree-shaking-example",
  "version": "1.0.0",
  "sideEffects": [
    "./src/utils/utils.js"
  ]
}

가장 궁극적으로는 side effect를 일으키지 않는 함수를 만드는 것이 중요하다. 즉, 함수 스코프 이외의 변수를 직접 변경시키지 않고 독립적이어야하며, 파라미터를 통하여 return 값을 예측 할 수 있어야한다.

 

사용할 모듈만 import하기

이것은 습관화를 들이면 좋은데, 간단하게 다음과 같이 불러오던 코드를

import * from './utils';

이처럼 바꾸는 것이다.

import { 필요한 모듈명 } from './utils'

 

코드에 따라 다르겠지만 tree shaking으로 드라마틱 한 효과가 없을 수도 있다. 그럼에도 불구하고 코드를 조금이라도 가볍게 가지고 올 수 있다는 것은 매우 큰 이점일 것이다.

 

---

참고 사이트

https://ui.toast.com/weekly-pick/ko_20180716

트리 쉐이킹으로 자바스크립트 페이로드 줄이기