search

microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.57k stars 1.52k forks source link

[OC] Downsize the webchat script hosted on CDN #4040

Open charliewang95 opened 3 years ago

charliewang95 commented 3 years ago

Please view our Technical Support Guide before filing a new issue.

Feature Request

Use the 'feature-request' query to search for existing feature requests.

The Samples tag also lists examples and implementations that have already been requested.

Is your feature request related to a problem? Please describe.

Customer of Dynamics 365 Omnichannel reported that because webchat script is too large (~5MB full size), their Google Lighthouse score dropped and their website is ranked lower than before in Google search engine.

Other incidents report that failure to load webchat script

Describe the suggestion or request in detail

Decrease the size of said script (We're using webchat-es5.js for instance).

Describe alternatives you have considered

Provide different versions of webchat leaving certain features out as the customer sees fit (For example, OC doesn't need speech), so it might be beneficial to use a version that doesn't have speech modules

Additional context

Unused JS Treemap

[feature-request]

compulim commented 3 years ago

Discussed with @charliewang95. I believe this will be a collaborative work and need improvements on both side.

This is partly because Lighthouse seems only look at data from the first page load. That means, if Adaptive Cards or Speech code is later used when Web Chat is triggered, Lighthouse couldn't capture those instrumentation data and will consider AC and Speech as unused code.

HesselWellema commented 2 years ago

The solution that worked for me is to show a lightweight chat-button in stead of loading the whole application on page-load.

compulim commented 2 years ago

I experimented with ESBuild and the bundle size did not go down. Instead, it goes up for 20%.

We should look at the number of these scenarios to see how good we are doing treeshaking. All of these scenarios are based on NPM.

Maybe we should also add tests to look at meta.json to make sure when certain components are not used, they are not built into the bundle.

charliewang95 commented 2 years ago

Sent out a request to do tree shaking on speech