나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미합니다.
JacaScript 파일의 크기의 증가, 요청 횟수의 증가는 그만큼 파일이 오고 가는 동안 화면 표시가 늦어진다는 것을 뜻하고, 네트워크 속도가 느린 환경에서는 더 큰 병목현상을 유발합니다.
따라서 트리쉐이킹을 통해 파일 크기를 가능한 줄이는 것이 최적화에 도움이 됩니다.
웹팩 4버전 이상을 사용하는 경우 ES6 모듈(import
, export
를 사용하는 모듈)을 대상으로 기본적인 트리쉐이킹을 제공합니다.
Create React App을 통해 만든 React 애플리케이션도 웹팩을 사용하기 때문에 트리쉐이킹이 가능합니다.
import { useState, useEffect } from 'react'
import
해올 때 위와 같이 실제로 사용할 코드만 불러서 사용하면 빌드할 때 코드의 크기를 줄일 수 있게 됩니다.
Babel은 자바스크립트 문법이 구형 브라우저에서도 호환 가능하도록 ES5 문법으로 변환하는 라이브러리입니다. 이때 ES5문법은 import
를 지원하지 않기 때문에 commonJS문법의 require
로 변경시키는데, 이 과정은 트리쉐이킹에 큰 걸림돌이 됩니다.
require
는 export
되는 모든 모듈을 불러오기 때문입니다.
이를 방지하기 위해서 아래와 같이 Barbelrc 파일에 코드를 작성하면 ES5로 변환되는 것을 막을 수 있습니다.
{
“presets”: [
[
“@babel/preset-env”,
{
"modules": false
}
]
]
}
반대로, modules
값을 true
로 설정하면 항상 ES5 문법으로 변환하므로 주의해서 작성해야 합니다.
웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킵니다.
const crews = ['kimcoding', 'parkhacker']
const addCrew = function (name) {
crews.push(name)
}
위 예제의 addCrew
함수는 함수 외부에 있는 배열인 crews
를 변경시키는 함수입니다. 해당 함수는 외부에 영향을 주지도 받지도 않는 순수 함수가 아니기 때문에 트리쉐이킹을 통해 제외하는 경우 문제가 발생할 수도 있다고 판단해 웹팩은 이 코드를 제외시키지 않습니다.
이럴 때 package.json 파일에서 sideEffects
를 설정하여 사이드 이펙트가 생기지 않을 것이므로 코드를 제외시켜도 됨을 웹팩에게 알려줄 수 있습니다.
아래의 예제는 애플리케이션 전체에 사이드 이펙트가 발생하지 않을 거라고 알려줍니다.
{
"name": "tree-shaking",
"version": "1.0.0",
"sideEffects": false
}
아래의 예제는 특정 파일에서는 사이드 이펙트가 발생하지 않을 거라고 알려줍니다.
{
"name": "tree-shaking",
"version": "1.0.0",
"sideEffects": ["./src/components/NoSideEffect.js"]
}