73% smaller app bundle, 1.5x faster time-to-interactive using dynamic imports

[catFurr]

Added dynamic imports for some of the largest libraries:

• rnnoise - Extra noise suppression
• excalidraw - Whiteboard
• zxcvbn/frequency_lists - Secure Room Names
• ts-ebml - Webp Recordings
• amplitude - analytics

Bundle size change:

Metric	Default (Current)	With Dynamic Imports	Improvement
Static Size	11.56 MB	7.27 MB	-37% (-4.29 MB)
Parsed Size	4.69 MB	2.63 MB	-44% (-2.06 MB)
Gzipped Size	1.49 MB	788 KB	-47% (-702 KB)

This results in significantly improved application performance across all key metrics, especially noticeable on slower network connections.

Fast Connection

Build	DOMContentLoaded	Load	Transferred
Default	869ms	2.13s	3.35 MB
Dynamic Imports	480ms (-45%)	1.96s	2.5 MB

Slow 4G Network (Real-World Conditions)

Build	DOMContentLoaded	Load	Transferred
Default	11.67s	20.63s	3.4 MB
Dynamic Imports	7.67s (-34%)	15.85s	2.5 MB

A live demonstration of the difference in loading times can be seen below:

• Default (current)
• Updated

Changes are divided into separate commits to make review easier.
Please let me know if I should update anything!

[catFurr]

We can convert these into dynamic imports as well:

• react-emoji-render
• dropbox
• microsoft calendar
• olm
• dayjs
• giphy

Overall bundle size reduction would be another 5 - 10%.

[jitsi-jenkins]

Hi, thanks for your contribution!
If you haven't already done so, could you please make sure you sign our CLA (https://jitsi.org/icla for individuals and https://jitsi.org/ccla for corporations)? We would unfortunately be unable to merge your patch unless we have that piece :(.

[saghul]

Exciting! Didn't you need to edit the webpack config too to make them standalone modules?

[catFurr]

Webpack seems to be correctly creating separate chunks for these automatically. I can see that they are also being loaded in the page when needed.
I checked the chunks with the bundle analysis tool.

However, just now realized I might need to edit the Makefile. webpack makes files like /libs/101.min.js and /libs/340.min.js which need to be copied over.
We don't know in advance what the filename will be, do you have advice on how I can edit the Makefile?

[saghul]

Isn't there a way to set the chunk name? I thought a special type of comment could.

[catFurr]

Done.
The amplitude module was causing issues so I've removed those changes. Instead I added manual chunking, which gives significant improvements on return visits.

React and vendor modules are cached as separate bundles, so changes to Jitsi source code only update the app bundle. This gives much faster load times for repeat site visitors even when we update our code.

[catFurr]

@saghul Can you please take a look when you have the chance?

[saghul]

Nice, thank you! Something we'll need to test is the impact of the changes on mobile, since the codebase is shared.

[saghul]

Doesn't this defeat the purpose of bundling it out, if we are going to load it at the start all the same?

[catFurr]

The react and vendor scripts are cached separately by the browser. So if we change our app code, browsers can reuse those (only app.bundle will be fetched).

We should only increment the ?v number for react and vendor if the package-lock.json file changes.

Stuff like excalidraw and rnnoise are still lazy loaded when needed.

[saghul]

Fair point!

[saghul]

@damencho Do you foresee a problem here? Any of our deployment scripts will need an update?

[damencho]

Well here at build time we put the jitsi-meet new version and on our deployments we always use base url. So that will be updated with the packages. I don't see a reason to handle it differently than the app bundle.
There is no point of following package-lock file, as that is always changed between stable versions and so on.

[catFurr]

You're right, there are a few changes affecting the native implementation. I don't have the resources to build the app. Any ideas on how to test this?

user@MacBook-Air jitsi-meet % bun run tsc:ci
$ bun run tsc:web && bun run tsc:native
$ tsc --noEmit --project tsconfig.web.json
$ tsc --noEmit --project tsconfig.native.json

user@MacBook-Air jitsi-meet % bun run lint:ci
$ eslint --ext .js,.ts,.tsx --max-warnings 0 .

user@MacBook-Air jitsi-meet %

No linter/ts errors for web or native.

[saghul]

It's possible you don't need to do anything because the Metro bundler will bundle them all the same, I was just pointing out a potential problem.

[saghul]

Jenkins please test this please.

[catFurr]

Will it be possible to get this merged in before the next release?