Video.js가 모놀리식 아키텍처를 트리 쉐이킹 가능한 모듈형 구조로 재작성해 번들 크기를 580KB에서 70KB(88% 감소)로 축소

Context

Video.js v8은 2010년부터 축적된 레거시 아키텍처로 인해 최소 설정 상태에서도 580KB의 최소화된 JavaScript를 포함했다. Flash 폴백 코드, 커스텀 DOM 조작 계층, 내장 CSS 스타일시트 등 사용하지 않는 기능이 번들에 강제로 포함되어 트리 쉐이킹이 불가능했다.

Technical Solution

• ESM 모듈 및 네임드 익스포트 도입: import { Player } from 'video.js'로 변경해 번들러가 정확히 어떤 코드가 사용되는지 추적 가능하게 함
• 커스텀 추상화를 네이티브 Web API로 교체: 커스텀 DOM 조작 계층 제거하고 HTMLMediaElement API 직접 사용
• CSS를 JavaScript에서 분리: 스타일시트를 선택적으로 import하거나 생략 가능하게 변경
• 모듈별 opt-in 기능 구조: HLS 스트리밍, 플러그인 등 필요한 모듈만 명시적으로 import하도록 설계
• 레거시 지원 제거: IE11 폴리필 및 Flash 폴백 코드 삭제, 최신 브라우저만 지원

Impact

• 코어 플레이어 번들 크기: 580KB → 70KB (88% 감소)
• 실제 마이그레이션 프로젝트에서 video.js 관련 JavaScript: 187KB gzipped → 22KB gzipped (88% 감소)
• Lighthouse 성능 점수: 모바일 환경에서 12점 향상

Key Takeaway

레거시 라이브러리의 번들 비만 문제는 단일 기능 최적화가 아닌 아키텍처 수준의 재설계로 해결할 수 있으며, ESM 기반 트리 쉐이킹 가능한 설계와 선택적 기능 로딩이 핵심이다.