[Optimization]Tree Shaking

February 1, 2023

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

JS의 트리쉐이킹이 필요한 이유

JS 파일 크기의 증가, 요청 횟수의 증가

요청 -> 다운 -> 압축 헤제 -> JS코드 파싱 -> DOM트리 생성 -> 컴파일 -> 코드실행

과정이 길기 때문에 크기가 커지면 시간도 증가

웹팩 4버전 이상이면, ES6 모듈(import, export를 사용하는 모듈)대상 기본적인 트리쉐이킹 제공

import React from "react";

보다

import { useState, useEffect } from "react";

Babel은 JS 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리

ES5문법은 import를 지원하지 않기 때문에 commonJS 문법의 require로 변경시킴

require는 export 되는 모든 모듈을 불러옴(트리쉐이킹 방해)

Barbelrc 파일

{
  “presets”: [
    [
      “@babel/preset-env”,
      {
	    "modules": false
      }
    ]
 ]
}

ES5로 변환하는 것 방지

modules 값을 true로 설정하면 항상 ES5 문법으로 변환

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

const crews = ["kimcoding", "parkhacker"];

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

해당 함수는 외부에 영향을 주지도 받지도 않는 함수

순수함수가 아니기 때문에 웹팩은 이 코드를 제외시키지 않음

package.json 파일에서 sideEffects를 설정, 사이드 이펙트가 생기지 않을 것이므로 코드를 제외시켜도 됨을 웹팩에게 알려줌

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

특정 파일에서는 발생하지 않을 것

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

트리쉐이킹이 적용되지 않는 라이브러리가 있다면, 어떤 문법을 사용하고 있는지 확인 필요

ES5로 작성된 모듈이 있을 수도 있기 때문

ES6를 지원하는 다른 모듈을 사용하는 것이 트리쉐이킹에 유리