Botframework-webchat: Create a new bundle without speech features and reduce the size for bundle

[lorenz-haenggi-axa]

Feature Request

Is your feature request related to a problem? Please describe.
we are using the newest Bundle version 4.9.1 of the Webchat because we have to customize the chat due to our branding restrictions. We are using own webcomponents with react.
Therefore we cant use the CDN Bundle.

We build using npm and deploy on our axa.ch website. The generated bundle is now "compressed" > 570KB. Our Analytics, SEO and UC teams removed our bot from the website due to this heavy size. For sure we are also using other features too. But the webchat is far too big.

Issue: if we wanted to use the minimal CDN bundle we have to rewrite all the code and cant use our webcomponents built for this.

We are frustrated because the bundle is too big for an extensive use with own web-components. The library is great, but too big and it contains features which could be an add-on

The biggest issue is for our customer. Due to this size we are not allowed to use the chat on our most important pages and this is bad for the customer that want digital help.

Describe the suggestion or request in detail
Question: could you do a new bundle without the speech features because this library is using a lot of space. And introduce a plugin-architecture to be able to add new features if needed.

create a new bundle without speech library dependency and and allow to add speech as an add-on.

alternative solution: use the CDN minimal javascript version and we have to rewrite the whole code again. If we are not successful with styling we have to build our own webchat just using directline API.
Which I believe is not the idea of the inventor of this webhat library

[Enhancement]

[vishwacsena]

@compulim can you take a look and comment?

[compulim]

What's your target size for gzipped JS? Our minimal bundle is 521 kB gzipped. Have you consider using code-splitting to load Web Chat on-demand?

We published stats.json. You can use Webpack Visualizer to see what's inside.

Web Chat is huge because we are a very complicated UI with huge customization options. You can consider rebuilding the UI by using our APIs and hooks. That would save you lots of time on business logics.

Breakdown for a numerous big contributors:

• Required
  
  
  
  • DirectLineJS
    
    
    
    
    
    • The version of RxJS we use is huge (2.5% + 2.0% + 2.4%)
    
    
    
  
  
  • Markdown-It for internal use (2.3%)
    
    
    
    
    
    • We use Markdown-It for some localized strings with hyperlinks
    
    
    
  
  
  • Localization strings (2.3% + 2.3%)
    
    
    
    
    
    • We currently bundle 43 languages
    
    
    
  
  
• Optional
  
  
  
  • Adaptive Cards (3.5% + 2.8%)
  
  
  • Cognitive Services Speech Services (8.3%)
  
  
  • Markdown + HTML sanitizer (1.8% + 5.3% + 0.2%)
    
    
    
    
    
    • The huge part (5.3%) goes to CSS sanitizer, postcss, which we don't exactly using it
    
    
    
  
  

[lorenz-haenggi-axa]

hi @compulim - thanks for the detailed feedback about our topic.
to your questions

• I was told that it should be ~200K

i checked our stats.json and I see the following split:

• all "blue circles" are from webchat component
• all "red circles" are cognitive libraries and adaptive cards

here I have calculated the optinmizations without speech and the % part of webchat.js inside our component

question

• how would you propose us to solve this issue? any options beside today?
• shall we fork the library and remove speech, built and test it?
• shall we start using directline API only?
• are we able to remove the optional libs just with customizing webpack? I am not sure

thanks for a valuable input

[compulim]

Can you switch to the minimal bundle (webchat-minimal.js), that entrypoint skipped loading Cognitive Services and Adaptive Card and will not add to your bundle size.

IIRC, you are using npm install to use Web Chat. Can you try out this?

- import ReactWebChat from 'botframework-webchat';
+ import ReactWebChat from 'botframework-webchat/lib/index-minimal';

This will use the minimal bundle: no Cognitive Services, no Adaptive Cards, no Direct Line Speech.

Let's check the bundle size after these and see if it works in your case.

[lorenz-haenggi-axa]

Dear @compulim

thanks - we have tested it and there is no difference
I integrated 2 calls and 2 were not possible (different files)
`
import { connectToWebChat } from "botframework-webchat-component";
import { createStore, createDirectLine } from "botframework-webchat/lib/index-minimal";
import ReactWebChat from 'botframework-webchat/lib/index-minimal';

import { DirectLine } from "botframework-directlinejs";
import { DirectLine } from "botframework-directlinejs";
`

is there an issue with the "botframework-directlinejs" and still importing all?
i will try to generate a stats.json

[lorenz-haenggi-axa]

here is our size chart

and the details

there is no much difference

[compulim]

Could you investigate why Cognitive Services is still there when importing index-minimal?

In our Webpack.config.js, we build webchat-minimal.js out of index-minimal.ts. And when I look at our stats.json, I am not seeing Cognitive Services.

• Red crosses: DirectLineJS-related
• Purple cross: Markdown-It (used for localization, we could replace with a smaller lib, if any)
• Yellow crosses: Localization and internationalization

[lorenz-haenggi-axa]

here is our webpack.config.js

(had to zip it to upload)
webpack.config.zip

[compulim]

Let me try to build a new create-react-app project and see if I can repro it.

[lolo8304]

Do you need our webpack configurations json?

[lorenz-haenggi-axa]

here is our webpack.config.js

webpack.config.zip

[compulim]

I am being tightened up on a new feature and hope to get something done this week. 🙇🏻‍♂️

[daveta]

Hi @lorenz-haenggi-axa : fyi, this is still on the radar.

[compulim]

I created a minimal Webpack + Web Chat repo here to see how things work, without too much emissions, https://github.com/compulim/webchat-bundle-size-webpack.

By switching this line of code, src/index.js:3, I am able to switching between a full build and minimal build. For instance, full build include speech support and Adaptive Cards. While the minimal build include only minimal experience.

I am seeing Speech SDK being loaded when full bundle is selected, which produced a 11.8 MiB file.

But when minimal bundle is selected, it produced a
stats.zip

file size of 8.27 MiB only.

This is based on Web Chat 4.10.0, which was released yesterday.

I have attached the stats.json files for both build.

@lorenz-haenggi-axa could you study this and see how it differs from your build?

[lolo8304]

Thx @compulim - I will talk with our web pack specialist @lucamele to see how we can fix our build.

This is great news. And i will also use the newest version.

@lorenz-haenggi-axa

[compulim]

Thanks @lolo8304.

[LucaMele]

Hello @compulim, I have not red all the inputs yet but have one question ahead before we start in depth the analysis: Is your build export, which have smaller size, compatible with IE11?

[lorenz-haenggi-axa]

hi @compulim - we are working on the topic in this next sprint and would like to ask you if you have a short feedback to the question of @LucaMele ? he is one of our FE mastermind

[lorenz-haenggi-axa]

hi @compulim - we have found the glitch in the code. We saw that not all exports were taken from index-minimal. Maybe it was there before or it changed.
never mind - we managed to generate now a package with -200KB less compressed code

import { connectToWebChat } from 'botframework-webchat';

NEW
import { connectToWebChat } from 'botframework-webchat/lib/index-minimal';

we are now verifying with the full-release on axa.ch that the package is stable smaller.
so far - very good news and great job from you guys for this package.

we are still running 4.9.x because there were some breaking changes in 4.10 and we did not had the time to test enough.
@LucaMele

we will still investigate to lower the package size with our colleagues from the frontend team.

[compulim]

Good to know, @lorenz-haenggi-axa.

Yes, everything need to be imported from /lib/index-minimal, otherwise, it will import the full version.

Let me know if you have any suggestions on reducing the package size. We love to make Web Chat smaller while maintaining a healthy feature set. If you have any, please feel free to open a new issues and let us know.