트리쉐이킹(Tree Shaking)

: 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 최적화 작업

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

Webpack을 사용하는 환경에서 효과적으로 트리쉐이킹을 하는 방법에 대해 알아보자.

1. 필요한 모듈만 import하기

import 구문을 이용해서 라이브러리를 불러와서 사용할 때, 라이브러리 전체가 아닌 필요한 모듈만 불러온다.
이렇게 하면 번들링 과정에서 사용하는 부분의 코드만 포함시키기 때문에 트리쉐이킹을 할 수 있다.

import React from 'react'; // ❌

import { useState, useEffect } from 'react; // ⭕️

2. Babelrc 파일 설정하기

Babel

: JavaScript 문법이 구 버전 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환해주는 라이브러리 (컴파일러)

이때, ES5 문법은 import를 지원하지 않기 때문에, commonJS 문법의 require로 변경시킨다.
require는 라이브러리의 모든 모듈을 불러오기 때문에 1번에서 작성한 것처럼 필요한 모듈만 불러오는 코드를 작성해도 소용이 없어진다.

➡️ 이를 방지하기 위해 Babelrc 파일에 아래처럼 코드를 작성해주면 ES5 문법으로 변환하는 것을 막을 수 있다.

// .babelrc
{
  “presets”: [ 
    [
      “@babel/preset-env”,
      {
	    "modules": false // modules 값을 false로 설정하면 ES5 문법으로 변환하는 것을 막고,
                         // 반대로 true로 설정하면 항상 ES5 문법으로 변환한다.
      }
    ]
 ]
}

3. sideEffects 설정하기

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

// 사이트 이펙트를 일으키는 코드 예시
// addCrew() 함수는 함수 외부에 있는 배열 `crews`를 변경시킨다.
const crews = ['kim', 'park'];

const addCrew = (name) => {
  crews.push(name);
}

Webpack은 순수 함수가 아닌, 사이드 이펙트를 일으키는 함수를 트리쉐이킹으로 제외하는 경우, 문제가 생길 수도 있다고 판단하여 번들링할 때 해당 코드를 제외시키지 않는다. (즉, 사용하지 않아도 번들링시킨다..)

➡️ 이때, package.json 파일에서 sideEffects를 설정하여, 애플리케이션 전체에서 사이드 이펙트가 발생하지 않을 것이니 트리쉐이킹을 해도 된다고 Webpack에게 알려줄 수 있다.

// package.json
{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": false
}

혹은 아래처럼 작성하여 특정 파일에서는 사이드 이펙트가 발생하지 않을 것이라고 알려줄 수 있다.

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

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

보통 3번까지 작성하면 트리쉐이킹이 잘 작동한다.
그럼에도 트리쉐이킹이 적용되지 않는 라이브러리가 있다면, 해당 라이브러리가 ES5 문법을 사용하고 있진 않은지 확인해야 한다.
이 경우에는 해당 모듈을 대체할 수 있는, ES6 문법을 지원하는 다른 모듈을 사용하는 것이 좋다.