Bundle size has increased (~1.5x) since introducing UI library

[lukehb]

Since decoupling the UI into its own library in: #110 we now see the bundle size has increased nearly ~1.5x.

We have some tight requirements about bundle size for some of our usecases so would like to fix this regression in bundle size if possible.

By bundle size, I specifically mean the size of the final player.js that is produced as a result of building implementations/EpicGames.

You can see the difference by comparing releases:

After the UI library change - https://github.com/EpicGames/PixelStreamingInfrastructure/releases/tag/UE5.2-0.2.1 - 347kb
Before the UI library change - https://github.com/EpicGames/PixelStreamingInfrastructure/releases/tag/UE5.2-0.1.0 - 203kb

@hmuurine Wondering if you had any ideas here?

I think what might be happening here player.ts depends on both the ui library and the core library and the transitive dependency of the core library is being built in twice.

[lukehb]

In general any big saves we can make to bundle size would be good.

[hmuurine]

Got the bundle size reduced to 218kB. Found a couple of issues that all played some part in this:

1. The library builds bundled all their external dependencies within the dist/*.js package
   • Could be excluded by adding externals section in library Webpack builds
   • The only one who needs to import and bundle these external dependencies is the final implementation application
   • Making this change reduced the dist/*.js sizes (library 128kB -> 118kB, ui-library 217kB -> 67kB) but did not affect the final player.js size because Webpack was able to dedupe the imports
   • Anyways, a good practice to not bundle in the dependencies
2. The build pipeline bundled two versions of the library code into the final package (could be seen by opening and investigating the final player.js, which had two versions of the library code)
   • Root cause was that build pipeline first executed npm link ../library in ui-library and after that executed npm ci, which overwrites the link with a real published NPM package fetched from NPM
   • The implementation project on the other hand used a linked local version
   • The end result was that both the local version and NPM version were included in the final bundle
   • Fixing this has the greatest effect: player.js 347k -> 220kB
3. The library modules were exported as umd modules, which isn't tree-shakeable
   • Added esm module build in addition to umd, and the module user can choose which to use
   • The final build was able to shake something out of the code, but not much: player.js 220kB -> 218kB
     • Maybe expected since we do use pretty much all the functionality that is available through the library

I'll tidy up and make a PR with these fixes.

[hmuurine]

Submitted the fixes in #117

[lukehb]

Landed in 6282965.