트리쉐이킹

트리 쉐이킹이란?

  • 사용되지 않는 코드를 제거하여 최적화 기법
  • 트리 쉐이킹이 가능한 정도는 앱과 앱에서 사용하고 있는 디펜던시 및 설계 구조에 따라 다름

how?

  • 현재 애플리케이션에서 번들러로 webpack을 사용하고 있으므로 webpack을 사용하여 트리쉐이킹 진행

  • require 대신 import 사용

    • webpack 버전2부터 ES6의 import 구문이 사용된 파일에 대하여 사용하지 않는 모듈의 export를 감지하는 기능을 제공

  • package.json 에서 sideEffects 설정

    • webpack 버전 4 부터는 제공
    • sideEffects: flase : 사용되지 않는 모듈을 삭제하여도 사이드이펙트가 없는 경우
    • sideEffects: [sideEffects가 있을것 같은 파일 path] : 배열 안에 있는 파일을 제외하고 트리쉐이킹 진행.

적용

Application

default 설정 (418.34KB → 405.51KB)

  • default 설정과 함께 export (418.34KB)

  • default 없이 export (405.51KB)

  • 조직별로 리소스를 모듈화하여 사용하고 있는데, 기본 조직의 정보가 default value로 설정되어있었음
  • 다른 조직의 경우, 기본조직의 정보가 필요 없으므로 default value 설정 변경
  • 기본조직 정보가 저장된 파일이 트리쉐이킹되어 번들 용량이 줄어듬

디펜던시

  • CRA에서 공식적으로 추천하는 라이브러리인 explore-source-map 을 사용하여 빌드 사이즈 분석
  • 용량을 많이 차지하고있는 라이브러리에 대해 tree shaking 진행

lodash

lodash 사용 (필요한 함수만 가져오기 60.35KB → 4.6KB)

  • import _ from ‘lodash’ (60.35KB)

  • import values from 'lodash/values' (4.6KB)

lodash-es (필요한 함수만 가져오기 84.95KB → 3.65KB)

  • import _ from lodash-es (84.95 KB)

  • import { values } from lodash-es (3.65KB)

  • lodash 의 경우, import 구문을 사용하지않으므로(require로 작성되어있음) import {values} from lodash 로는 최적화 할 수 없음
  • lodash 나 lodash-es 둘 다 필요한 모듈만 불러오는 경우, 최적화를 할 수 있음

crypto.js

필요한 함수만 가져오기 (51.13KB → 5.26KB)

  • import crypto from crypto (51.13KB)

  • (5.26KB)

  • crypto도 require 로 작성되어있으므로 import cryptoEncHex from 'crypto-js/enc-hex 와 같은 방식으로 필요한 모듈을 불러옴

chart.js

결론

  • ES6 문법을 사용하여 필요한 함수만 가져올 경우 트리쉐이킹이 잘 적용됨
  • 오래된 라이브러리인 경우 트리쉐이킹을 지원하지 않기도 함 (ex. moment)