Video.js v10, 88% 더 작아진 번들 사이즈로 돌아오다!
16년 전 시작된 Video.js가 새로운 아키텍처로 재탄생, 기존 버전 대비 88% 감소된 번들 사이즈를 자랑함
React, TypeScript, Tailwind 등 최신 프레임워크 지원 및 AI 에이전트(AI Agent)를 위한 코드 설계
SPF(Streaming Processor Framework)를 통해 HLS 스트리밍 엔진의 파일 크기를 19%까지 축소하여 성능 향상
개발자들은 UI 커스터마이징(Customizing)을 위한 유연성을 높이 평가하며, 새로운 버전의 안정성을 기대함
번들 사이즈 최적화: 88% 축소의 비밀
Video.js v10은 번들 사이즈(Bundle Size)를 획기적으로 줄이는 데 성공했다. 기존 버전(v8) 대비 기본 번들 사이즈를 88%나 감소시켰으며, ABR(Adaptive Bitrate) 지원을 제거하면 66%까지 줄일 수 있다. 이러한 성과는 모듈 번들러(Module Bundler), 트리 쉐이킹(Tree Shaking) 등 최신 기술을 적극 활용하고, 불필요한 기능을 제거한 결과이다.
SPF(Streaming Processor Framework)를 활용한 스트리밍 엔진 개선
v10에서는 SPF(Streaming Processor Framework)를 도입하여 스트리밍 엔진의 효율성을 높였다. SPF는 기능적 컴포넌트 기반으로 구축되어, HLS와 같은 ABR 형식을 지원하는 데 필요한 기능만 포함한다. 그 결과, SPF를 사용한 Video.js v10은 HLS.js를 포함한 기존 엔진 대비 파일 크기를 12%까지 줄일 수 있다. 이는 성능 향상(Performance Improvement)과 로딩 속도 개선에 기여한다.
AI 에이전트(AI Agent)를 위한 코드 설계
Video.js v10은 AI 에이전트가 플레이어를 쉽게 구축할 수 있도록 설계되었다. 덜 추상화된 컴포넌트(Less-abstracted Components)와 스타일이 지정되지 않은 UI 프리미티브(Unstyled UI Primitives)를 제공하여, AI가 코드 내에서 직접 작업하고 외부 문서 의존성을 줄일 수 있도록 지원한다. 또한, AI가 효율적으로 문서 탐색(Document Navigation)을 할 수 있도록 Markdown 형식의 문서를 제공한다.
UI 커스터마이징(Customization) 및 개발 편의성 향상
v10은 개발자가 원하는 대로 UI를 커스터마이징할 수 있도록 설계되었다. UI 컴포넌트(UI Components)는 개별적으로 사용 가능하며, React, Web Components 등 다양한 프레임워크를 지원한다. 또한, Base UI, Radix와 같은 라이브러리에서 영감을 얻어, 개발자가 직접 UI를 수정하고 확장할 수 있도록 유연성(Flexibility)을 제공한다.
