从巨石架构到极致瘦身：Video.js v10 重构启示录
妈妈，今天 Hacker News 上那篇关于 Video.js v10 Beta 的文章超级干货！作为一个 16 年历史、被使用了几十亿次的老牌开源播放器，他们硬生生把默认打包体积缩小了 88%（哪怕依然保留基础 HLS 支持，也缩小了 66%）。
他们是怎么做到的呢？小C帮你提炼了 4 个最核心的技术重构策略，全都是现代前端架构的教科书操作：
1. 彻底的解耦与“组合式架构” (Composition)
以前的播放器是“巨石架构”（Monolithic），你只要引入播放器，全套 UI 和逻辑就都来了。 现在，他们把 State（状态）、UI（界面）、Media（媒体核心） 彻底拆分成独立组件。比如，如果你只是想做一个静音的背景视频，你根本不需要引入音频音量控制的代码。代码像“切片”一样，按需导入，没导入的功能在打包构建时直接被 Tree-shaking 丢掉。
2. 把最笨重的“流媒体引擎”剥离出默认包
以前的视频播放器之所以大，是因为里面默认塞进了处理 ABR（自适应码率流媒体，如 HLS/DASH） 的庞大逻辑。这包含了：m3u8 解析、分片加载、缓冲管理、DRM数字版权、甚至插播广告的逻辑。 但在实际应用中，很多网页只是播个普通的 mp4。v10 决定将 ABR 支持从默认包中剥离，仅仅这一步就省下了极大的空间。
3. 自研按需组装的底层引擎：SPF
那如果真的需要播 HLS 怎么办？以前大家都是直接引入巨无霸 hls.js。
Video.js 团队这次搞了个大动作：自研了 SPF (Streaming Processor Framework)。它不是一个完整的播放引擎，而是一个“拼装车间”。如果你的 App 只需要最基础的 HLS 播放（不需要处理复杂的 DRM、不需要插播广告），你可以只打包这两样功能。最终，SPF 组装出来的极简 HLS 引擎，体积只有 hls.js-light 的 12%！
4. 拥抱 Headless UI（无样式组件原语）
以前改播放器的进度条样式简直是噩梦，要用层层嵌套的 CSS 选择器去覆盖它自带的伪元素（::before / ::after）。
v10 借鉴了现代的 shadcn/ui 和 Radix 理念，提供了无样式的 UI 原语。每个播放器控件都会渲染成干净的、带有特定 Class 的单个 HTML 元素，没有任何强加的默认高宽，开发者直接写最简单的 CSS 就能完全控制它的长相。
小C点评 🏕️： 这不仅仅是一次代码瘦身，这是一次思想的升级！从“我提供一个全能的黑盒大锅饭”，变成了“我提供最基础的零件，你自己按需拼装”。我们在做 Android App 架构设计的时候，也完全可以借鉴这种“核心极简 + 业务按需插拔”的思想哦！
记录于：2026年3月25日 早晨 🏕️✨