Webpack bundle 사이즈 최적화 - (3)

현재 이 글은 Webpack bundle 사이즈 최적화 - (2) 의 시점 바로 다음에 최적화 했던 부분인데.. 현생이 바쁘단 이유로 글 써야지 써야지.. 만 반복하고 미루어 왔다가 지금 적게 되었습니다.

최근 회사 본부에서 사이트에 서비스를 런칭한 이 후 본부적으로 제가 담당하였던 캘린더 모듈의 초기 로딩 속도 및 렌더링 속도가 빠르다는 얘기를 듣게 되었습니다.
이에 본부 FE 연구원들에게 제가 적용하였던 부분에 대해 공유하는 자리가 있게 되었고 그에 따라 이 글을 적게 되었습니다.

오늘의 주제는 간단하게 코드 스플리팅 입니다.

지난 글 회고]

지난 포스트에서는 lighthouse와 관련해서 font 최적화 부분들과 (물론 CDN 부분은 추후에 적용 되었지만 누락 되어있는 부분), webpack 설정의 production 모드에 대해 글을 적었습니다.
기본적으로 앞서 설명하였던 production 모드를 통해서 번들링 사이즈를 줄이고, minify 및 compress 등의 기법들도 무조건적으로 중요한 부분중에 하나 입니다.

코드 스플리팅

코드 스플리팅 이란 웹 애플리케이션의 JavaScript 코드를 작은 조각들로 분할하여 필요한 코드 조각만 로드하도록 하는 기술입니다. 이를 통해 초기 로딩 시간을 최적화하고 페이지 성능을 향상시킬 수 있습니다. 코드 스플리팅을 사용하면 사용자가 사이트에 접속했을 때 모든 JavaScript 코드를 다운로드할 필요 없이 필요한 페이지에 대한 코드만 다운로드할 수 있습니다.

이와 같은 코드 스플리팅을 구현하는 방법은 여러가지가 있습니다.

• 동적 import() 함수 사용: ES6의 동적 import() 함수를 사용하여 모듈을 동적으로 로드할 수 있습니다. 이를 이용하여 필요한 모듈을 비동기적으로 로드하고, 해당 모듈이 필요한 페이지에 사용될 때 로드됩니다.
• Webpack 설정: 웹팩과 같은 번들러를 사용할 때, 코드 스플리팅을 위한 설정을 할 수 있습니다. optimization.splitChunks 설정을 통해 코드 스플리팅을 구현할 수 있습니다.

크게 두가지의 코드 스플리팅 구현 방법 중에 이번 글에 설명드릴 부분은 Webpack 설정 부분입니다.

적용하기 전 상황

지난 포스트에서는 main.js 하나의 파일로 빌드가 되었었고 그에 따라 초기 로딩 속도에 대해 확인 해보았습니다.

• 개발자 도구 > 퍼포먼스 탭에서 새로 고침시 초기 로딩 속도 및 사이즈
  (테스트 환경 자체가 로컬 환경이어서 클라우드에 올렸던 시점과는 조금 더 늦은 감이 있는 점 참고 부탁드립니다.)

• 그림에서 보여지는 것과 같이 하나의 main.js를 받는데 1.16s 가 걸리고 encoded Data의 크기는 7.1MB 로 생각했던 것보다 사이즈가 굉장이 컸습니다.

• 사이즈가 크다는 소리는 js 를 다운받아서 파싱하고 해석하기 전까지 해당 파일을 다운로드하고 있다는 소리이고, 다운 받는동안 사용자는 로딩 화면을 봐야한다는 점 입니다.

적용하고 난 후 상황

기본적으로 main.js 의 파일로 하나가 빌드 되는 것들이 아닌 BundleAnalyzerPlugin를 통해 사이즈 용량이 큰 부분들의 패키지들을 따로 묶어서 여러개의 파일로 나누어 주었습니다. 이에 따라 크게 main.js / wapl-vendors / vendors 와 같이 세개의 파일로 나누었습니다.

• wapl-vendors : wapl이 기본적으로 사용하는 wapl-core, wapl-ui (디자인 시스템) 을 하나의 vendor 파일로 묶어주게 되었습니다.

• vendors : 캘린더 모듈이 package로 설치하여 사용하고 있는 라이브러리들의 용량을 나타냅니다.

• main : 캘린더 모듈 자체의 사이즈와 용량을 나타냅니다.

• 위에 그림과 달리 main.js 를 로드하는데 276.60ms 와 encoded Data의 크기는 683KB 로 현저하게 줄게 되었습니다.

속도 개선 : 1.16s -> 0.2766s ( 76.17% 의 개선 )
사이즈 개선 : 7.1MB -> 683KB ( 90.37% 의 개선 )

또한 main.js를 다운받는 하나의 시간대와 달리 wapl-venors와 vendors, main 세개의 파일이 병렬적으로 js를 다운 받기 때문에 초기 로딩 속도가 개선 되었습니다.

• 실장님이 팀장님께 보냈던 메시지...

Webpack 설정

앞서 코트 스플리팅에 나온 기법중에 하나인 optimization.splitChunks 를 사용하여 적용한 부분 입니다.

그림에서 처럼 cacheGroups을 통해 waplVendor에 들어갈 @wapl로 이루어진 패키지들을 묶어주었고 나머지는 vendors라는 이름으로 묶어 최종적으로 3개의 파일로 분리하게 되었습니다.

결론

아직 Webpack에 대해 모든 부분을 다 안다고 생각하지도 않고, 많은 부분을 더 배워서 적용해서 점진적으로 나아가야 한다는 방향성을 일깨우게 된 경험 입니다.
하지만 이번 경험을 계기로 스스로 개선한 부분을 공유하는 자리를 가지면서, 함께 성장해 나갈 수 있는 발판이 마련된 것 같았습니다.

다음글은 rollup.config.js 로 캘린더 위젯 및 모듈 컴포넌트를 배포하면서 많은 삽질(?) 이 있었던 부분을 적을까 하는데.. 언제가 될 지 모르겠지만 빠르게 적어보도록 하겠습니다.