Tailoring feature set for custom setup and reduce package size

[diviaki]

Hello!
Thank you for hls.js, it's pure gold. :)
I plan to use it on my video portal where all the videos are in the same format. No live-streaming h264+aac.
I realized I do not need fmp4 and crypt but do need altaudio. Because of the later I can not use the light distribution.
I realized I could add altaudio to the light version by modifying build-config.ts but have no clue how to ditch fmp4 or crypt.
I also in the fog what other features could be stripped that would result in a measurable decrease in the package size.
Any advice is welcome. :)

[robwalch]

Hi @diviaki,

I could add altaudio to the light version by modifying build-config.ts [...] what other features

Reading through these issues might help clear up some of that fog:

• Optimize bundle size #4936

You can create a custom build with env args to toggle features (no change to build-config necessary):

hls.js/build-config.js

Lines 36 to 47 in 5cfbc0a

	const addSubtitleSupport = !!env.SUBTITLE || !!env.USE_SUBTITLES;
	const addAltAudioSupport = !!env.ALT_AUDIO || !!env.USE_ALT_AUDIO;
	const addEMESupport = !!env.EME_DRM || !!env.USE_EME_DRM;
	const addCMCDSupport = !!env.CMCD || !!env.USE_CMCD;
	const addContentSteeringSupport =
	!!env.CONTENT_STEERING || !!env.USE_CONTENT_STEERING;
	const addVariableSubstitutionSupport =
	!!env.VARIABLE_SUBSTITUTION || !!env.USE_VARIABLE_SUBSTITUTION;
	const addM2TSAdvancedCodecSupport =
	!!env.M2TS_ADVANCED_CODECS || !!env.USE_M2TS_ADVANCED_CODECS;
	const addMediaCapabilitiesSupport =
	!!env.MEDIA_CAPABILITIES || !!env.USE_MEDIA_CAPABILITIES;

Experimenting with modifying the build-config or src successfully should help too.

It works by stubbing out modules and related controllers which are overridable and nullable in the config:

hls.js/src/config.ts

Lines 523 to 538 in 5cfbc0a

	// Dynamic Modules
	...timelineConfig(),
	subtitleStreamController: __USE_SUBTITLES__
	? SubtitleStreamController
	: undefined,
	subtitleTrackController: __USE_SUBTITLES__
	? SubtitleTrackController
	: undefined,
	timelineController: __USE_SUBTITLES__ ? TimelineController : undefined,
	audioStreamController: __USE_ALT_AUDIO__ ? AudioStreamController : undefined,
	audioTrackController: __USE_ALT_AUDIO__ ? AudioTrackController : undefined,
	emeController: __USE_EME_DRM__ ? EMEController : undefined,
	cmcdController: __USE_CMCD__ ? CMCDController : undefined,
	contentSteeringController: __USE_CONTENT_STEERING__
	? ContentSteeringController
	: undefined,

Since we introduced ES Modules (#2910), we haven't fully realized the potential for composition as an alternative to the approach above. I've had conversations with @cjpillsbury of Mux about refactoring hls.ts and config.ts so that the dependencies pulled in to DefaultConfig and the Hls entry point are composable. We need someone to file an issue, ideally with a commitment to contribute the changes. This approach could replace most of the build tasks that create the light build from directives that stub/null modules/config-options to new entry points that remove them through tree-shaking.

[Need] h264+aac [...] altaudio
[No] fmp4

You want to remove modules in src/demux. There are no build options for this. This requires changes to modules that import Demuxer sub-classes (transmuxer).

[No...] crypt

Both the transmuxer and base-stream-contollers depend on Decrypter. You'd need to come up with a way to parameterize its presence like we do the controllers above.

No live-streaming

Some might argue that you can save a lot by removing live support. Live is not encapsulated like other features in HLS.js. The "L" in HLS stands for "Live". You certainly could look at taking out the latency controller and hacking away at parts of the playlist loaders and utilities for merging live playlists. We'd take contributions in this area if they improve the code base and don't break existing functionally. I think if we were to bridge this gap however we need to start adding errors for when a "lite" build encounters a feature at runtime that it is unable to handle because of missing modules. That brings up the point that error and event constants are defined centrally. We like that, however it doesn't lend itself to the encapsulation that makes this kind of customization effective.

[diviaki]

Thanks for the extensive answer.
As a first step, I added altaudio to the light version using an env var. This saves 107-83=24K (min.js after brotli)

[diviaki]

Another easy gain, commenting out these lines brings it down to 77K (saves 6k) and still back ts streams containing h264 and aac:
src/demux/transmuxer.ts
type MuxConfig =
// | { demux: typeof MP4Demuxer; remux: typeof PassThroughRemuxer }
| { demux: typeof TSDemuxer; remux: typeof MP4Remuxer }
// | { demux: typeof AC3Demuxer; remux: typeof MP4Remuxer }
// | { demux: typeof AACDemuxer; remux: typeof MP4Remuxer }
/* | { demux: typeof MP3Demuxer; remux: typeof MP4Remuxer }*/;

const muxConfig: MuxConfig[] = [
// { demux: MP4Demuxer, remux: PassThroughRemuxer },
{ demux: TSDemuxer, remux: MP4Remuxer },
// { demux: AACDemuxer, remux: MP4Remuxer },
// { demux: MP3Demuxer, remux: MP4Remuxer },
];

src/demux/tsdemuxer.ts
//import * as MpegAudio from './audio/mpegaudio';
//import * as AC3 from './audio/ac3-demuxer';
//import HevcVideoParser from './video/hevc-video-parser';
//import SampleAesDecrypter from './sample-aes';

[diviaki]

removing Decrypter would save another 2K bringing it down to 75K
just comment out the two lines that match grep "new Decrypter" src/ -r