twilio-video.js
twilio-video.js copied to clipboard
Reduce bundle size
- [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
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.
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).
@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:
![Screenshot 2021-01-28 at 11 46 39](https://user-images.githubusercontent.com/31971/106134546-933cfd80-615e-11eb-97fd-f15e827e4a8e.png)
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
Is ESM support on the roadmap yet?
@Steakeye ,
Sorry for the delayed response. As of now, it is not on the roadmap, but we will definitely look into it when we have some cycles free.
Thanks,
Manjesh