트리 쉐이킹

• 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것

자바스크립트 트리쉐이킹 하는 이유

1) JavaScript 파일 크기 / 요청 횟수 증가

• 과거 HTML 위주의 단순한 웹 페이지와는 비교도 안 될 정도로 규모 있고 화려한 인터랙션을 자랑하는 웹 애플리케이션들이 증가 (참고: http archive)

2) JavaScript 파일의 실행 시간

• 자바스크립트는 코드 실행까지 거쳐야 하는 과정이 많음
  (다운로드 - 압축 해제 - JS 코드 파싱해서 DOM 트리 생성 - 컴파일 - 실행)
• 다른 리소스에 비해 상대적으로 많은 시간을 소모
• 파일의 크기가 커진 만큼, 파일의 실행 시간 또한 증가

JavaScript 트리쉐이킹

• 웹팩 4버전 이상을 사용하는 경우에는 ES6 모듈(import, export를 사용하는 모듈)을 대상으로는 기본적인 트리쉐이킹을 제공
• Create React App을 통해 만든 React 애플리케이션도 웹팩을 사용하고 있기 때문에 트리쉐이킹이 가능

1. 필요한 모듈만 import 하기

• 라이브러리 전체를 불러오는 것이 아니라 필요한 모듈만 불러오기

// ❌ 리액트의 전체 코드가 불려옴 (번들링 시 이 모든 코드를 같이 빌드)
import React from 'react'

// ✅ 필요한 것만 불러옴
import { useState, useEffect } from 'react'

2. Babelrc 파일 설정하기

• Babel : 자바스크립트 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리
• ES5문법은 import를 지원하지 않기 때문에 commonJS 문법의 require로 변경시키는데, 이 과정은 트리쉐이킹에 큰 걸림돌 (export 되는 모든 모듈을 불러옴)
• 이를 방지하기 위해 Barbelrc 파일에 다음과 같은 코드를 작성하면 ES5로 변환하는 것을 막을 수 있다.

{
  “presets”: [ 
    [
      “@babel/preset-env”,
      {
	    "modules": false // modules 값을 true로 설정하면 항상 ES5 문법으로 변환
      }
    ]
 ]
}

• but 이렇게 ES5 문법으로 변환하는 것을 막은 경우, ES5를 지원하지 않는 브라우저에서는 제대로 안 보일 수 있음.

3. sideEffects 설정하기

• 웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다.

const crews = ['kimcoding', 'parkhacker']

const addCrew = function (name) {
	crews.push(name)
}

• addCrew 함수는 함수 외부에 있는 배열인 crews를 변경시키는 (= 사이드 이펙트가 있는)함수. 웹팩은 이 코드를 제외시키지 않는다.

• 이럴 때 package.json 파일에서 sideEffects를 설정해 사이드 이펙트가 생기지 않을 것이므로 코드를 제외시켜도 됨을 웹팩에게 알려줄 수 있다.

애플리케이션 전체에서 사이드 이펙트가 발생하지 않을 것이라고 알려주는 경우

packga.json

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

특정 파일에서 사이드 이펙트가 발생하지 않을 것이라고 알려주는 경우

packga.json

{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": ["./src/components/NoSideEffect.js"]
}

4. ES6 문법을 사용하는 모듈 사용하기

• ES6 문법을 사용하는 모듈을 사용하면 해당 모듈에서도 필요한 부분만 import 할 수 있으므로 사용하지 않는 코드는 빌드할 때 제외할 수 있다.