[기초지식] Optimization(Tree Shaking)

Tree Shaking이란?

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

JavaScript 트리쉐이킹

1. 필요한 모듈만 import 하기

• 라이브러리 전체를 불러오는 것이 아니라, 필요한 모듈만 불러오면
  번들링 과정에서 사용하는 부분의 코드만 포함 시킴
  ex)

  // 좋지 않은 예시
  import React from 'react'
  // 좋은 예시
  import { useState, useEffect } from 'react'

2. Babelrc 파일 설정하기

• Bable : JS문법이 구형 브라우저에서도 호환이 가능하도록
  ES5문법으로 변환하는 라이브러리
  ES5문법은 import를 지원하지 않기 때문에 require로 변경

이 때, require는 export되는 모든 모듈을 불러오기 때문에,
상단에서 필요한 문법만 import하는 것이 소용이 없어짐
이를 방지하기 위해선?
=> Balbelre 파일 작성

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

3. sideEffects 설정하기

사이드 이펙트를 일으키는 코드는,
웹팩이 트리쉐이킹 대상에서 제외시킴
따라서 package.json파일에서 코드를 제외시켜도 됨을
웹팩에게 알려서 불필요한 코드 제외

// package.json
{
  "name": "tree-shaking",
  "version": "1.0.0",
  // 어플리케이션 전체에서 사이드 이펙트가 발생하지 않을 것
  "sideEffects": false
  // 혹은 아래와 같이 작성
  // 특정 파일 내에서 사이드 이펙트가 발생하지 않을 것
  "sideEffects": ["./src/components/NoSideEffect.js"]
}

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