Channel JavaScript SDK 번들 경량화를 위한 전략과 도구
Channel Talk
5월 18일
- 프론트엔드
- performance
- SDK
- bundle
- 테크 인사이트
웹 애플리케이션의 자바스크립트 번들 경량화 작업은 페이지 로딩 속도를 높이고 사용자 경험을 향상시키는 데 큰 도움이 됩니다. 또한, 이는 네트워크 대역폭을 절약하고 서버 부하를 감소시키는 효과도 있습니다.
이 글에서는 Channel JavaScript SDK 번들 경량화를 위한 전략과 도구를 소개합니다.
1. dead code 제거
번들을 분석해서 미사용중인 코드와 라이브러리를 확인, 제거합니다.
Typescript project에서 미사용중인 export 문을 검사합니다.
CI flow에 추가해서
pre-commit이나pre-push전에 dead code를 검사합니다.
번들 구성 요소를 Tree Map형태로 시각적으로 확인할 수 있는 webpack plugin입니다.
번들을 분석해서 사용하지 않는, 불필요한 라이브러리를 제거합니다.
사용되지 않은 CSS, JS 코드를 확인할 수 있습니다.
production 환경에서 불필요한 라이브러리를 output 번들에서 제외할 수 있는 옵션입니다.
redux-logger같은 개발 환경에서만 필요한 라이브러리를externals설정 옵션으로 production 번들에서 제외할 수 있습니다.
2. 외부 라이브러리 최적화
비슷한 패키지 간 크기 비교 후 제품에 적합한 패키지를 선택합니다.
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를 향상합니다.
AWS CloudFront Brotli Compression방식은 Gzip 압축 방식보다 최대 24% 더 작은 파일 크기를 지원합니다.
CloudFront에서 오리진으로 전달하기 전에 정규화된
Accept-Encoding헤더에br을 포함하면Brotli압축을 활성화할 수 있습니다.Brotli 압축 방식 사용을 위해서는 서버는 HTTPS를 지원해야 합니다.
webpack v4+는 production mode에서 기본적으로 code를 minify합니다.terser toolkit을 사용해도 code minify를 수행할 수 있습니다.
4. Browser polyfill 최적화
구형 브라우저에서 최신 자바스크립트(ES6) 코드 실행을 위해 polyfill이 필요합니다. 서비스의 target environment에 필요한 polyfill만 번들에 포함시켜 번들 크기를 최적화합니다.
babel/preset-env의 Smart Presetbabel/preset-env는 target 미설정 시 oldest browser를 target으로 간주합니다.번들 경량화를 위해 target을 설정합니다.
babel/preset-env는browserlist와 함께 연동해서 사용이 가능합니다.browserslist를 사용하면 브라우저 별 세부적인 target 지정이 가능합니다. best practice를 기준으로 서비스에 맞게 최적화를 진행합니다.
5. 지속적인 번들 크기 모니터링
지속적인 번들 크기 모니터링을 통해 급격한 번들 증가를 체크할 수 있습니다. 잘못된 import, 누락한 minify, 다른 버전으로 중복 설치된 패키지 등의 이유로 급격하게 번들이 커질 수 있습니다.
bundle size를 지속적으로 모니터링 할 수 있도록 도와줍니다.
매 커밋 시 bundle size를 모니터링하고, 변경사항을 알려줍니다.
branch별 bundle size history report를 지원합니다.
웹 애플리케이션의 JavaScript SDK 번들 경량화 작업은 사용자 경험을 향상시키고 서버 부하를 감소시키는 중요한 역할을 합니다. 본 글에서 소개한 경량화 전략과 도구를 활용하여 빠르고 효율적인 웹 애플리케이션을 만들어 보세요. 지속적으로 최적화 작업을 진행하면서 웹 애플리케이션의 성능을 꾸준히 개선해 나갈 수 있습니다.
[이런 글도 추천드려요]