twilio-video.js Reduce bundle size

Reduce bundle size

Open gregjoeval opened this issue 3 years ago • 6 comments

[x] I have verified that the issue occurs with the latest twilio-video.js release and is not marked as a known issue in the CHANGELOG.md.
[x] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
[x] I verified that the Quickstart application works in my environment.
[x] I am not sharing any Personally Identifiable Information (PII) or sensitive account information (API keys, credentials, etc.) when reporting this issue.

The problem twilio-video (2.7.1) has a bundle size of 292.74 KB, which is almost 10% of my app's total bundle size. I would expect this to be much less or provide a way to tree-shake unused code.

To create the html page shown in the image above I built my app, which depends on twilio-video, and used source-map-explorer to view the bundle source map breakdown.

Software versions:

[x] Browser(s): n/a
[x] Operating System: n/a
[x] twilio-video.js: 2.7.1
[x] Third-party libraries (e.g., Angular, React, etc.): React

Nov 13 '20 02:11 gregjoeval

Hello @gregjoeval, Thank you for writing about this and sharing this map showing breakdown of module sizes. Looking the usage I do not see anything that can help reduce the size of twilio-video at this point.

But we will keep this in mind in future when we take up some restructuring of the code.

Dec 01 '20 22:12 makarandp0

Thanks for the reply! If you were able to support ESM then that would most likely suffice. I personally use tsdx for my typescript packages and I'm sure you would be able find something similar for this project (since it does not use typescript).

Dec 02 '20 00:12 gregjoeval

@makarandp0 I agree with @gregjoeval last comment. The transition to using ESM is becoming more and more popular e.g. Vite, Snowpack, etc. I'm using Snowpack and integrating Twilio Video based on the current architecture has been problematic to say the least.

import * as Video from 'twilio-video';

Results in:

Jan 28 '21 11:01 newtriks

My NextJs application includes video calls, chat and audio calls, but has nothing else inside it, it's a big wrapper for those tree features, As such, twilio services uses 175 kb gzipped, out of 546.01 kb of whole app, that's about a third. While this is not just twilio-video issue, I couldn't find a better place to chime in on bundle size issue.

bundle-analyzer client result

twilio_size