[최적화 기법] 트리쉐이킹(Tree Shaking) / Lighthouse

📌 트리쉐이킹(Tree Shaking)

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

자바스크립트 파일 크기의 증가와 함께 자바스크립트 파일을 요청하면 HTTP 요청 수 또한 증가했다.

커다란 자바스크립트 파일이 오가면,
=> 네트워크 리소스 소모가 그만큼 커진다.
=> 파일이 오고 가는 동안 화면 표시가 늦어진다.
=> 트리 쉐이킹을 통해 파일 크기를 가능한 줄인다.

자바스크립트 파일이 커진 만큼
=> 파일의 실행 시간이 증가한다.
=> CPU 사양에 따라 소모 시간에 차이가 난다.
=> 트리 쉐이킹을 통한 최적화 필요

자바스크립트 트리쉐이킹

웹팩을 사용하는 환경에서 효과적으로 트리쉐이킹 하는 방법

1. 구조 분해 할당으로 필요한 모듈만 import 하기

그렇지 않고 모듈 전체를 불러오면 번들링할 때 모든 코드를 빌드한다.

2. Babelrc 파일 설정하기

ES5의 require은 export되는 모든 모듈을 불러온다.
=> 브라우저 호환을 위한 ES5 문법으로 변환하는 과정은 트리쉐이킹에 큰 걸림돌이 된다.
=> Babelrc 파일에 "modules": false 설정을 해준다.

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

3. package.json 파일에서 sideEffects 설정하기

웹팩은 사이드 이펙트를 일으킬 수 있는 코드는 트리쉐이킹 대상에서 제외한다.
따라서 package.json 파일에서 사이드 이펙트가 일어나지 않을 것을 설정한다.

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


//또는 사이드 이펙트가 일어나지 않을 특정 파일을 설정
{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": ["./src/components/NoSideEffect.js"]
}

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

ES6 문법을 사용하는 모듈에서는,
사용하지 않는 코드는 빌드에서 제외하고 필요한 부분만 import 하기 때문이다.

📌 Lighthhouse

구글에서 개발한 오픈소스로, 사이트를 검사하여 성능 측정을 할 수 있는 툴이다.

performance: 웹 성능 측정
Accessibility: 웹 접근성 확인
Best Practices: 웹 표준 모범 사례를 따르는지 확인
SEO: 검색 엔진 최적화 확인
PWA: 모바일 앱으로써도 잘 작동하는지 확인

크롬 개발자 도구에서 실행하기

검사하고 싶은 페이지에서 개발자 도구 열기
-> lighthouse 탭 클릭
-> Generate report 클릭
-> 30~60초간 검사가 실행되고 결과 리포트가 개발자 도구에 생성된다.

Node CLI에서 실행하기

$ npm install -g lighthouse : 전역 모듈로 설치
$ lighthouse <url>: 명령어로 검사 실행