video.js size, vol.2

[astralmaster]

Description

Amazing player, used it for years, but for the love of god, it is time to come up with a stripped down version for those who want basic functionality and stability of video.js. Even the core, novtt, minified version still weighs 225 kB (8.11.8), and yes, gzip/brotli produces a smaller file but that is not as much of a big deal as the fact that eventually it still has to be de-compressed and evaluated; all 225 kB of it. And if you have a web page that has a video element as LCP and cannot defer loading video.js, you end up having to wait until it gets evaluated and processed, plus 45.8 kB CSS that accompanies it. That is blocking my web page's render and Pagespeed/Lighthouse is having frenzy of red colors when showing me my LCP statistics. I have nearly full screen WEBP images on my website that weigh 60 kB, my total web page size is 600-700 kB and video.js accounts for 30-40% of it.

I know this topic has been discussed several times before. But perhaps someone from the team can write a tutorial on how some parts can be stripped down without causing much harm to stability? I do not need audio/video track information panels, picture-in-picture support, subtitles, context menus and all the SVG data that is needed for the icons that these features have. I am certain the size could be decreased by a lot if these were removed. I have tried doing it myself but every time I start and remove some parts and see console full of reference errors I just give up and let it be.

On every page where I have video.js I have to cannibalize some other scripts/features in order to keep LCP in check. But that also prevents me from adding some extra features that websites could benefit from and generally just having some wiggle room.

Is there a way to strip down features selectively without causing too much harm to stability?

Reduced test case

none

Steps to reproduce

None

Errors

No response

What version of Video.js are you using?

8.11.8

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

General

What OS(es) and version(s) does this occur with?

General

[sgomes]

I've also looked at making video.js smaller, without much success; the project seems primarily designed as a third-party script, and less so as a packaged dependency — even though it's published as an npm package with an ESM target. This focus seems to have affected some important design decisions.

When used as a library, the current interface doesn't lend itself to modularisation at all. It relies on a single, monolithic export that imports and wraps everything else, making it impossible to selectively exclude functionality from consumers' bundles. Since tree-shaking only works on things that aren't used, and since everything is in use here because of the monolithic export, nothing gets tree-shaken away. Changing this would require a complete rethink of the entire architecture with modularisation in mind, and a significant rewrite after that.

As of right now, the only option seems to be to fork the code, modify it yourself to remove unwanted functionality, and prepare a custom build. That's an unknowable (and probably substantial) level of effort for anyone not familiar with the internals, and even if you succeed it means you're now maintaining a custom fork if you want to pull in bug fixes going forward 😞