Tree shaking & Code Splitting

개인 프로젝트를 진행하며 빌드를 마친 후 파일이 대부분 고용량인 것을 확인할 수 있다.

큰 기능이 동작하는 모듈이라고 하더라도 번들에서 2mb가 넘게 나올 수는 없었다.

용량을 줄이기 위한 조치가 필요했고, 트리쉐이킹과 코드 스플리팅 개념에 대해 배우게 되었다.

 

적용 전:

대부분의 모듈 용량이 1.8mb 이상인 것을 확인할 수 있다.

적용 후:

이전에 비해 용량이 상당히 줄어든 것을 확인해볼 수 있다

 

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

코드를 빌드할 때도 실제로 쓰지 않는 코드들을 제외한다는 개념.

 

기본적으로 webpack이 수행하지만 commonjs으로된 코드나 development 단계에서는 적용되지 않는다.

ES module로 의존성을 관리하는 모듈 및 production 모드로 실제 배포를 위해 번들링할 때만 적용된다.

 

트리쉐이킹은 왜 필요한 것인가?

번들 사이즈 축소에 따른 다운로드 속도와 컴파일 속도의 향상이 가능하기 때문이 이유이다.

예시로 네트워크 통신을 하며 이미지와 같은 헤비한 리소스를 다운로드하거나 업로드할 때

느리게 동작하게 된다면 유저로 하여금 불편함을 주게 된다.

결과적으로는 서비스에 대한 유저의 이용률이 감소할 수 있다는 것이다.

따라서 트리쉐이킹을 통한 성능 개선은 꼭 필요하다.

 

프로젝트 내에서 사용한 트리쉐이킹

1) antd-icon tree shaking

프로젝트에서 용량을 꽤나 차지하던 antd 아이콘이었다.

기존에는 antd icon을 모두 가져와 사용해 고용량이었지만

필요한 icon만 @ant-design/icons 파일에서 import해왔다.

특정 아이콘만을 import 해오는 것으로 용량을 줄일 수 있다.

2) 불필요한 import문, 함수, 변수 제거

웹팩에서 자동으로 불필요하다고 판단되어지는 코드는 트리쉐이킹을 하지만

혹시 걸러주지 않을 경우도 대비해 리팩토링하였다.

3) moment -> dayjs로의 변경

moment를 사용하지 않고 dayjs를 사용하기도 했지만 moment를 다룰 상황도

발생할 수 있다고 생각했다. 빌드를 하고 확인해봤을 때 moment의 용량이 매우 컸는데

moment의 locale의 용량을 줄이기 위해 next.config.js에

locale에서 한국어만 사용하겠다는 코드를 넣어줬고, 용량이 무척 감소한 것을 확인할 수 있었다.

new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/)

---

Code Splitting

JS에서 코드를 분할하는 방법은 많다.

그 중에서 가장 쉽고 효과적인 방법인 dynamic import를 통해 코드 스플리팅을 진행했다.

 

코드 스플리팅을 하는 이유

트리쉐이킹과 같은 이유에서다.

프로젝트의 규모가 커질수록 js 파일 용량도 거대해지기 마련이다.
용량이 커진다는 것은 곧 페이지 로딩 속도가 느려진다는 것과 마찬가지이다.

이런 때엔 코드 스플리팅을 통해 필요한 코드만 가져오는 방법이 필요하다.

 

1) dynamic import를 통한  lazy loading

페이지에서 유저에게 필요하지 않은 코드는 불러오지 않게 하며 앱의 초기 로딩에 부담을 덜었다.