Description
Hello, it looks like Zoom Web SDK dumps a lot of stuff into the section of the html page. This results in the size of the page to be over 20mb.
This breaks reporting libraries (FullStory)
Error
The full error message or issue you are running into.
Which Web Client SDK version?
1.8.6
To Reproduce(If applicable)
Steps to reproduce the behavior:
Open Chrome’s Dev Tools and switch to the “Elements Tab”
Right click on the root <html> element and choose “Edit as HTML”
Copy the contents of the HTML and Paste into a new document on you computer.
Save the file and check its size.
Size of the head is over 20mb
Device (please complete the following information):
Thank you for using the Developer Forum. First, please try testing with the latest version of the Web SDK and see if the issue persists. There have been multiple bug fixes since your version of the SDK. You can test using our Sample Web App to confirm if you see the same issue.
Where are you seeing that the Web SDK adds ~20MB to the size of the web page? While we are always working to improve the size and efficiency of the Web SDK, my understanding is that it shouldn’t be 20MB.
Thank you for clarifying. I should note that the size of the copied HTML won’t be what is actually transferred over the network. This is due to caching and compression as well as reactive code that generates more code when it is run from your browser.
The best method to use is the Network tab of your browser’s developer tools. When I did this, I saw the data transferred was 6.6 MB. When it comes to a production app, you can reduce that size even further using server and client optimization (such as gzip and webpack).
Of course, we are also always working to improve the Web SDK and reduce the size while also improving browser support and adding features.
Hi Max, thanks for your comment. Yes, I understand what you mean, however, some analytics tools (in this case, Fullstory, but there are plenty of others) run after the full dom is generated and they transfer over the fully generated HTML code after React is done donig it’s thing. And that code is 22MB.
I see the same code blocks appear over and over again.
For example, the following block appears 136 times. Is there a way to refactor it so it doesn’t duplicate so many times? Or open to other suggestions
Thank you for clarifying, I see what you mean in regard to duplicate code. This should be improved when we release the more customizable version of the Web SDK with v2. In that version, we’ve refactored the dependencies used by the SDK.
I think the best option is to implement a dependency bundler such as Webpack. Webpack can create a dependency graph for each of your routes and then produce bundled assets that only include a single version of what is needed on the current page.
As you can see there, it includes a build script to bundle resources. If you want to customize the configuration of Webpack or any other features there, you can follow the steps below: