Do we need the communication-calling package if we are only using the chat?

[reliccare]

I am wondering if this problem was addressed by ACS Team after the issue was brought up. This is a serious issue for React Apps & I think it will help the entire community to relook at the dependencies. Requesting an update from anyone in ACS team.

Thank you!

Discussed in #3208

^{Originally posted by DercilioFontes June 15, 2023}
The communication-calling package is huge, and I was trying to reduce my app/website size.

I didn't install the @azure/communication-calling, but it is a dependency that greatly impacts my bundle size. Check image:

Is there a way to not have it bundled if it is not used?

My stack:

"@azure/communication-chat": "^1.3.2-beta.1",
"@azure/communication-common": "^2.2.0",
"@azure/communication-react": "^1.5.1-beta.5",
"react": "^18.2.0",
 "vite": "^4.3.9",
```</div>

[alkwa-msft]

@reliccare in creating the initial NPM package we had decided for ease of development to include everything into one package. So for the NPM dependencies today we ask that you will need to include all of them. Ideally with your package you should not be using any Calling related imports so when you webpack everything it should be tree-shaken out of your bundle and you should only have Chat (at runtime).

@reliccare can you confirm that you are explicitly not using any imports related to Calling from the UI Library in your web application?

If you are still seeing calling and video-effects as part of your bundle then we can do some investigation as to why those dependencies are being brought in. @vhuseinova-msft can we try making a test app only including the Chat composite and then use webpack-bundle-analyzer to determine if we are bringing in video-effects or Calling into that generated bundle?

[reliccare]

@alkwa-msft - Thank you for your response. I will double check on tree shaking bit but I can confirm that we are not using any Calling imports.

The earlier post in fact points to this issue where there was no import for calling library but it was included.

Appreciate your support!

[vhuseinova-msft]

@alkwa-msft, thanks for sharing more details!
Hi @reliccare, thanks for your question.
I've just tested a simple app with only chat imports and with both calling and chat imports, and I can confirm that the issue is resolved for the latest releases of @azure/communication-react (after 1.7.0-beta.2).
Please check it out and let us know if you have any questions.

[alkwa-msft]

@reliccare 1.5.1-beta.5 is quite old. We would suggest you update to a more recent version. If you would prefer to stay on beta, we would suggest 1.11.0-beta.2

https://www.npmjs.com/package/@azure/communication-react?activeTab=versions

[reliccare]

@alkwa-msft - I can confirm that we are using 1.11.0 version. Given below are the dependencies from our package.json.

"dependencies": {
"@ant-design/icons": "^5.2.6",
"@azure/communication-common": "^1.1.0",
"@azure/communication-react": "^1.11.0",
"@azure/openai": "1.0.0-beta.10",
"@fluentui/react": "8.101.0",
"@medplum/core": "^2.2.7",
"@rjsf/core": "^5.15.1",
"@rjsf/validator-ajv8": "^5.15.1",
"@tailwindcss/typography": "^0.5.9",
"antd": "^5.12.8",
"antd-mobile": "^5.34.0",
"axios": "^1.6.5",
"fuse.js": "^6.6.2",
"lodash": "^4.17.21",
"moment": "^2.30.1",
"react": "^17.0.2",
"react-chartjs-2": "^2.11.2",
"react-dom": "^17.0.2",
"react-error-boundary": "^4.0.12",
"react-json-view": "^1.21.3",
"react-json-view-lite": "^0.9.8",
"react-moment": "^1.1.3",
"react-router-dom": "^5.3.4",
"react-scripts": "5.0.1",
"react-transition-group": "^4.4.5",
"source-map-explorer": "^2.5.3"
},

You will notice that there is no direct import of communication-calling. However, once the build is done, here is what I see

So either the issue is not resolved or I am missing something that I am not able to understand why communication-calling library will be included in the built package.

[alkwa-msft]

I ran a test on one of my own test repositories (https://github.com/alkwa-msft/bundle-size-calling) you can also try out as well. On main we use Calling and so our webpack bundle analysis does indicate we are including Calling.

I made another branch (alkwa/remove-calling) and when I did a webpack bundle analysis I don't see any calling in there (I am still trying to use the Chat Composite so I am still using the UI Library)

The way I was able to remove Calling was to make sure a) I wasn't importing anything from the calling side and b) If I was importing, then I wasn't using those calling related components.

If you feel comfortable sharing a snippet with us for more analysis we would be happy to review.
Unfortunately this type of issue can only be made based off of what you might be using from the UI Library and without seeing your actual code of what you are importing and using it is challenging for us to be able to tell specifically what is wrong.

(Something that could be helpful for debugging)
You can also look into my two branches (main, alkwa/remove-calling) to see if you can trigger a similar webpack bundle analysis via (npx cra-bundle-analyzer). We can work off of these test branches to see if we can repro something if sharing code is not possible.

[reliccare]

Thank you @alkwa-msft. I will work with my team to create a version that we can share with you for your review. I will try to share something by Wednesday this week.

I have confirmed that we are not importing anything from calling side which is why it's a bit surprising to see calling component in the bundle.

[vhuseinova-msft]

Thanks @reliccare !
Could you also share which components/composites you use from @azure/communication-react package?

[reliccare]

@vhuseinova-msft - We are not using composites. Instead we are using individual react components in our app. The two libraries we are using are listed below.
"@azure/communication-common": "^1.1.0",
"@azure/communication-react": "^1.11.0",

I am working on getting a version prepared that we can share in public so you can see the problem in the react app.

[reliccare]

Hi @vhuseinova-msft - You can access the application that we are building at https://github.com/reliccare/public/tree/main. If you run the build and analyze the package, you will be able to view the issue that we are encountering.

Thanks for your help and let me know if there are any questions.

[vhuseinova-msft]

Thank you for sharing it! Please allow us to look into this and we would get back to you shortly.

[vhuseinova-msft]

Hi @reliccare ! I just wanted to share a quick update that I was able to reproduce the issue and I can confirm that it's an issue in Web UI library.

[reliccare]

Thank you @vhuseinova-msft for confirmation. Looking forward to the next steps / resolution.

[vhuseinova-msft]

Just another quick update: I have investigated the issue a little bit more and I see the issue when usePropsFor hook is used. I have created a task in our backlog so we will continue working on resolving this issue further. We will let you know with further updates.

[reliccare]

Thank you @vhuseinova-msft for the method.

I believe usePropsFor hook is used correctly with Web UI Library. Let us know if you see any issue with the hook usage.

[reliccare]

Hi @vhuseinova-msft - Is there an update on this ticket? We need help reducing the load time on our app. It's becoming an issue as we are trying to roll this out to a customer.

[vhuseinova-msft]

Hi @reliccare, sorry for the delay.
The item is still in our backlog.

As a workaround for now, could you try to exclude the calling dependencies with HtmlWebpackPlugin from the bundle for webpack or similar plugins for Vite? Please see this link as a refference.
Let us know if this solves the issue

[reliccare]

Thanks @vhuseinova-msft - Thanks. We will try that. Just out of curiosity - Is ACS UI Library not a focus area? Asking because we are using ACS heavily in our product development and knowing the direction will help us plan our internal ACS strategy.

[vhuseinova-msft]

Yes, UI Library is a focus for ACS. The workaround is to unblock you for the moment as it will take some time to fix and release the change needed. Could you please let me know if the workaround unblocks you?