Optimization 트리 쉐이킹(Tree Shaking)

HanSungUk·2022년 8월 4일
0

Optimization

목록 보기
3/3

Optimization 트리 쉐이킹(Tree Shaking)

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

트리쉐이킹(Tree Shaking)이란?

나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미합니다.
JacaScript 파일의 크기의 증가, 요청 횟수의 증가는 그만큼 파일이 오고 가는 동안 화면 표시가 늦어진다는 것을 뜻하고, 네트워크 속도가 느린 환경에서는 더 큰 병목현상을 유발합니다.
따라서 트리쉐이킹을 통해 파일 크기를 가능한 줄이는 것이 최적화에 도움이 됩니다.

JavsScript 트리쉐이킹

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

1. 필요한 모듈만 import 하기

import { useState, useEffect } from 'react'

import 해올 때 위와 같이 실제로 사용할 코드만 불러서 사용하면 빌드할 때 코드의 크기를 줄일 수 있게 됩니다.

2. Babelrc 파일 설정하기

Babel은 자바스크립트 문법이 구형 브라우저에서도 호환 가능하도록 ES5 문법으로 변환하는 라이브러리입니다. 이때 ES5문법은 import를 지원하지 않기 때문에 commonJS문법의 require로 변경시키는데, 이 과정은 트리쉐이킹에 큰 걸림돌이 됩니다.
requireexport되는 모든 모듈을 불러오기 때문입니다.

이를 방지하기 위해서 아래와 같이 Barbelrc 파일에 코드를 작성하면 ES5로 변환되는 것을 막을 수 있습니다.

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

반대로, modules값을 true로 설정하면 항상 ES5 문법으로 변환하므로 주의해서 작성해야 합니다.

3. sideEffects 설정하기

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

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"]
}

0개의 댓글