Botframework-webchat: How to reduce size of my custom build

[sanoorvishwa]

This is in continuation to Issue #1715
We are trying to reduce the size of custom built project that uses node module botframework-webchat 4.2.1-0.
We found that the size of the file webchat.js in cdn is 1.74MB where as size of file webchat-minimal.js in cdn is 1.09MB only.

My question here is how webchat-minimal.js was built so that I can follow similar steps in my custom project so as to make my final built file size smaller.

Thanks in advance,
Vishwa

[compulim]

I really want to do so. Will be great if you could help.

You can look at this sunburst chart to understand more, https://cdn.botframework.com/botframework-webchat/master/stats.html. (The sunburst chart is 30+ MB)

Few things:

• Move Adaptive Cards out of bundle (#1302, -251 KB)
• (Full bundle only) We are taking a big size hit by postcss, which is included by our sanitizer (sanitize-html)
  
  
  
  • See if there is any other smaller/better sanitizer than sanitize-html
  
  
• Move from RxJS to core-js Observable (-208 KB)
  
  
  
  • DirectLineJS is using RxJS, and it's difficult to get it out unless we rewrite it
  
  

If we finish these tasks, we could possibly shave off 30-40% of file size.

The other thing to investigate, could we leverage code-splitting? Code-splitting in component is new to us (or anyone, I believe).

[kislakiruben]

See if there is any other smaller/better sanitizer than sanitize-html

You should look into Insane. Haven't worked with it yet, but it looks promising.

[compulim]

@kislakiruben great to know about insane, but last update was 3 years ago. 😳

[sk2andy]

I have the same issue - I cloned the repo, ran npm run bootstrapand then npm run install. The size of ./packages/bundle/dist/webchat-instrumented-minimal.js is 6.7MB

why are your CDN-Files way smaller?
In comparison: my react dom is 760 kb:

and your react dom is 105kb

So am I missing something in the build process? Is the bundle package not the one I have to look for?

[compulim]

If you run npm run build or npm run watch, it is building for development, i.e. webpack --run-dev.

If you run npm run prepublishOnly, it is building for production, equals to webpack or webpack --mode production.

I believe the tree-shaking algorithm in development build is not as aggressive as production build.

[cwhitten]

Closing as stale