Minimum bundle node-module availability for custom projects

[sanoorvishwa]

Hi,
I am building custom project with ReactWebChat component included in it.

        <ReactWebChat
          className="chat"
          attachmentMiddleware={attachmentMiddleware}
          directLine={ this.state.directLine }
          store={ this.store }
          styleOptions={this.styleOptions}
        />

I import ReactWebChat from 'botframework-webchat' node-module.

import ReactWebChat, { createDirectLine, createStore } from 'botframework-webchat';

My react-app build is creating huge file 1.2a3be8a7.chunk.js(1.9MB). Is there any custom node-module for botframework-webchat which will bring minimal required features only and size of built file can be reduced?

Thanks,
Vishwa

[corinagum]

Hi @sanoorvishwa, I don't know that there is a node modules solution to this problem. If you are interested in importing the CDN, you can look into our different bundles, such as 02.a.getting-started-minimal-bundle, which limit the packages that you are importing to Web Chat.

@compulim, do you have further insight?

[sanoorvishwa]

Adding to the above question: In the custom project 14.customization-piping-to-redux (with 'botframework-webchat' included), how do I build it to es5 bundle. With the regular build, my bot is not working in IE11.

[corinagum]

@sanoorvishwa in that case, I would recommend you bring in your own polyfills into the project. To see what polyfills Web Chat uses, take a look at the es5 bundle index.ts.

[compulim]

Bundle size

Looking at Webpack visualizer stats (it is a multi megabyte huge file), it suggest that postcss is taking quite some space, followed by Adaptive Cards.

If we are not using Adaptive Cards (minimal bundle), we are still bundling part of it due to typing. We need to completely remove Adaptive Cards from minimal bundle, there is a work item for this, #1302.

Then the next one we should take out is rxjs, it is referenced by DirectLineJS. I am unsure we have a concrete work item on it, but internally, we all know we want to rewrite/rearchitect DirectLineJS to exclude rxjs.

ES5 bundle

If you are using NPM to include Web Chat, we are not including our stack of ES5 ponyfillls. @corinagum listed the stuff we need.

The reason is, in your project, you may already brought bluebird package in, so you may not really need to use core-js bare Promise. Also same for whatwg-fetch vs. fetch-ie8.

So in NPM version of Web Chat, we don't actually include any bundles.