🔍 Tree Shaking
나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미한다.
웹 애플리케이션의 JavaScript 파일 크기가 과거와 비교했을 때, 굉장히 커졌으며 JavaScript 파일을 요청하는 HTTP 요청 수 또한 증가함에 따라 네트워크 리소스 소모가 늘어났다.
그 만큼 파일이 오고 가는 동안 화면 표시가 늦어진다는 뜻이며, JavaScript 파일이 커진 만큼, 파일의 실행 시간 또한 증가하므로, JavaScript 파일을 요청하고 다운받아 오는 시간 외에 파일을 실행하는 시간도 늘어나기 때문에 이탈률을 줄이기 위해 트리 쉐이킹을 통해 파일 크기를 가능한 줄이는 것이 최적화에 도움이 된다.
👀 JavaScript Tree Shaking
웹팩 4버전 이상을 사용하는 경우, ES6 모듈(import, export를 사용하는 모듈)을 대상으로 기본적인 트리쉐이킹을 제공하며, Create React App을 통해 만든 React 애플리케이션도 웹팩을 사용하고 있기 때문에 트리쉐이킹이 가능하다.
React 환경에서 Tree Shaking을 수행하는 방법은 아래와같다.
1. 필요한 모듈만 import
라이브러리 전체를 불러오게 되면, 이 중에서 실제로 사용하는 코드는 얼마 되지 않더라도 번들링할때 이 모든 코드를 같이 빌드하게 되기때문에 불필요한 코드가 포함된다.
따라서, 실제로 사용할 모듈만 import해 불러온다면 번들링 과정에서 사용하는 부분의 코드만 포함시키기 때문에 트리쉐이킹이 가능하다.
import { useState, useEffect } from 'react'2. Babelrc 파일 설정
Babel은 자바스크립트 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리이다.
이 때 ES5문법은 import를 지원하지 않기 때문에 commonJS 문법의 require로 변경시키는데, require는 export 되는 모든 모듈을 불러오기 때문에 Tree Shaking에 방해가 된다.
따라서, 필요한 모듈만 불러오기 위한 코드를 작성해도 소용이 없어지기 때문에 이를 방지하기 위해서 Barbelrc 파일에 다음과 같은 코드를 작성해주면 ES5로 변환하는 것을 막을 수 있다.
{
“presets”: [
[
“@babel/preset-env”,
{
// modules 값을 true로 설정 시, 항상 ES5 문법으로 변환
"modules": false
}
]
]
}3. sideEffects 설정
웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다.
const fruits = ['apple', 'banana']
const addFruit = function (name) {
fruits.push(name)
}addFruit 함수는 함수 외부에 있는 배열인 fruits를 변경시키는 함수로, 순수 함수(외부에 영향을 주지도 받지도 않는 함수)가 아니기 때문에 트리쉐이킹을 통해 제외하는 경우 문제가 생길 수도 있다고 판단하여 웹팩은 해당 코드를 제외시키지 않는다.
이럴 때 package.json 파일에서 sideEffects를 설정하여 사이드 이펙트가 생기지 않을 것이므로 코드를 제외시켜도 됨을 웹팩에게 알려줄 수 있다.
다음과 같이 작성하면 애플리케이션 전체에서 사이드 이펙트가 발생하지 않을 것이라고 알려준다.
{
"name": "tree-shaking",
"version": "1.0.0",
"sideEffects": false
}특정 파일에서는 발생하지 않을 것임을 알려주기 위해서는 아래와 같이 작성한다.
{
"name": "tree-shaking",
"version": "1.0.0",
"sideEffects": ["./src/components/NoSideEffect.js"]
}
4. ES6 문법을 사용하는 모듈 사용
보통 3번까지 작성하면 트리쉐이킹이 잘 작동하지만, 모듈에 따라서 ES5로 작성된 모듈이 있을 수도 있으므로 만약 트리쉐이킹이 적용되지 않는 라이브러리가 있다면, 해당 모듈을 대체할 수 있으면서 ES6를 지원하는 다른 모듈을 사용하는 것이 좋다.
Reference: 코드스테이츠
