Channel JavaScript SDK 번들 경량화를 위한 전략과 도구

웹 애플리케이션의 자바스크립트 번들 경량화 작업은 페이지 로딩 속도를 높이고 사용자 경험을 향상시키는 데 큰 도움이 됩니다. 또한, 이는 네트워크 대역폭을 절약하고 서버 부하를 감소시키는 효과도 있습니다.

이 글에서는 Channel JavaScript SDK 번들 경량화를 위한 전략과 도구를 소개합니다.

1. dead code 제거

번들을 분석해서 미사용중인 코드와 라이브러리를 확인, 제거합니다.

• ts-prune

  • Typescript project에서 미사용중인 export 문을 검사합니다.

  • CI flow에 추가해서 pre-commit 이나 pre-push 전에 dead code를 검사합니다.

    

• webpack bundle anaylzer

  • 번들 구성 요소를 Tree Map형태로 시각적으로 확인할 수 있는 webpack plugin입니다.

  • 번들을 분석해서 사용하지 않는, 불필요한 라이브러리를 제거합니다.

    

• DevTools > coverage tab

  • 사용되지 않은 CSS, JS 코드를 확인할 수 있습니다.

    

• webpack externals 설정 옵션

  • production 환경에서 불필요한 라이브러리를 output 번들에서 제외할 수 있는 옵션입니다.

  • redux-logger 같은 개발 환경에서만 필요한 라이브러리를 externals 설정 옵션으로 production 번들에서 제외할 수 있습니다.

2. 외부 라이브러리 최적화

비슷한 패키지 간 크기 비교 후 제품에 적합한 패키지를 선택합니다.

• bundlephobia

  • npm package 설치 시 번들에 추가되는 크기를 확인할 수 있습니다 (minify, gzipped 별).

  • 패키지 구성(composition)을 확인할 수 있습니다.

  • 패키지 내 개별 export 별 gzip 크기를 확인할 수 있습니다.

  • 비슷한 패키지들 간 크기 비교가 가능합니다.

    

Channel JavaScript SDK에 적용한 외부 라이브러리 최적화 작업을 소개합니다.

• lodash (24.5kb)

  • lodash의 메서드들은 ES6에서 대부분 기본적으로 지원합니다.

  • 구현이 필요한 몇몇 메서드들만 직접 구현해서 사용합니다.

  • Reference 1: You-Dont-Need-Lodash-Underscore

  • Reference 2: youmightnotneed-lodash

• Immutable.js (17.7kb)

  • 기존 SDK에서는 redux와 함께 Immutable.js를 사용했습니다.

  • Immer (4.7kb)는 대부분의 애플리케이션에서 Immutable.js 보다 나은 옵션입니다(redux docs).

  • Immutable.js -> immer 마이그레이션을 진행하여 번들크기, 코드 복잡성을 감소합니다.

• qs (9.8kb)

  • 기존 SDK에서는 url의 query string 조작을 위해 qs라이브러리를 사용했습니다.

  • query string 조작은 native Web API인 URLSearchParam로 대체 가능합니다.

• react-dropzone (7.5kb)

  • 기존 SDK에서는 파일 Drag & Drop 을 통한 파일업로드 기능을 위해 react-dropzone 라이브러리를 사용했습니다.

  • Drag & Drop 파일업로드 기능은 native HTML Drag and Drop interface 로 대체 가능합니다.

3. Compression & minification

번들 압축, minify를 통해 웹 애플리케이션의 request size를 줄여 page performance를 향상합니다.

• brotli compression format 적용

  • AWS CloudFront Brotli Compression방식은 Gzip 압축 방식보다 최대 24% 더 작은 파일 크기를 지원합니다.

  • CloudFront에서 오리진으로 전달하기 전에 정규화된 Accept-Encoding 헤더에 br을 포함하면 Brotli 압축을 활성화할 수 있습니다.

  • Brotli 압축 방식 사용을 위해서는 서버는 HTTPS를 지원해야 합니다.

  • Brotli 압축 방식은 대부분의 모던 브라우저와 호환 가능합니다

• minify

  • webpack v4+는 production mode에서 기본적으로 code를 minify합니다.

  • terser toolkit을 사용해도 code minify를 수행할 수 있습니다.

4. Browser polyfill 최적화

구형 브라우저에서 최신 자바스크립트(ES6) 코드 실행을 위해 polyfill이 필요합니다. 서비스의 target environment에 필요한 polyfill만 번들에 포함시켜 번들 크기를 최적화합니다.

• babel/preset-env의 Smart Preset

  • babel/preset-env는 target 미설정 시 oldest browser를 target으로 간주합니다.

  • 번들 경량화를 위해 target을 설정합니다.

  • babel/preset-env는 browserlist와 함께 연동해서 사용이 가능합니다.

  • browserslist를 사용하면 브라우저 별 세부적인 target 지정이 가능합니다. best practice를 기준으로 서비스에 맞게 최적화를 진행합니다.

5. 지속적인 번들 크기 모니터링

지속적인 번들 크기 모니터링을 통해 급격한 번들 증가를 체크할 수 있습니다. 잘못된 import, 누락한 minify, 다른 버전으로 중복 설치된 패키지 등의 이유로 급격하게 번들이 커질 수 있습니다.

• bundlemon

  • bundle size를 지속적으로 모니터링 할 수 있도록 도와줍니다.

  • 매 커밋 시 bundle size를 모니터링하고, 변경사항을 알려줍니다.

  • branch별 bundle size history report를 지원합니다.

    

웹 애플리케이션의 JavaScript SDK 번들 경량화 작업은 사용자 경험을 향상시키고 서버 부하를 감소시키는 중요한 역할을 합니다. 본 글에서 소개한 경량화 전략과 도구를 활용하여 빠르고 효율적인 웹 애플리케이션을 만들어 보세요. 지속적으로 최적화 작업을 진행하면서 웹 애플리케이션의 성능을 꾸준히 개선해 나갈 수 있습니다.

[이런 글도 추천드려요]

• 피그마 플러그인으로 아이콘 업데이트 자동화하기

• 프론트엔드 프로젝트 최신화 - 1편 : Yarn berry

• 프론트엔드 프로젝트 최신화 - 2편 : 모노레포