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

[DercilioFontes]

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",

[DercilioFontes]

I created a custom package removing the calling part.

Incredibly, it was linked by a single small function that does depend on the calling code, by was placed in the CallComposite folder, using common functions that could be in their folder to avoid the coupling. Everything is working fine with the chat.

So, this reduced my app from more than 14k modules to 2.5k and the last bundle from 8Mb to 2.5Mb!

It would be great to have a chat library independent of the video/calling libraries for those who want to build only a chat app.

   node_modules/@azure/communication-react/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.js:26:34:
      26 │ import { isValidIdentifier } from '../../CallComposite/utils/Utils';

[greenpau]

@DercilioFontes , how did you remove the calling part? I am also running into this issue.

[DercilioFontes]

Hi @greenpau,

This is a customization/manipulation of the @azure/communication-react package. It can cause issues, so you must test it very well and do it every time you upgrade it. I did it once but later used the regular package for convenience. After some work compressing the bundle to gzip and making the web server deliver it, we didn't apply it again.

Steps:

1. Copy the package to another folder

cp -rf node_modules/@azure/communication-react custom-packages/@azure/

2. Removed the calling packages (@azure/communication-calling and @azure/communication-calling-effects) from the "peerDependencies" in the package.json.

  "peerDependencies": {
    "@azure/communication-calling": "^1.31.1", <--
    "@azure/communication-calling-effects": "^1.1.2", <--
    "@azure/communication-chat": ">=1.5.4",
    "@types/react": ">=16.8.0 <19.0.0",
    "@types/react-dom": ">=16.8.0 <19.0.0",
    "react": ">=16.8.0 <19.0.0",
    "react-dom": ">=16.8.0 <19.0.0"
  },

3. You must remove all code in the @azure/communication-react that uses them. This is the trick part, but you can follow the imports, folder names and methods using "call/calling." I remember keeping only the dist-esm to simplify things, but this depends on your setup.

4. To use the customized package, you can "pack" the plugins to a .tgz file and install it:

cd custom-plugins/@azure/communication-react
npm pack --pack-destination ../../
cd ../../../
npm install ./custom-plugins/@azure/communication-react-[latest version_number].tgz
# Do a clean install to remove not-use dependencies from the `node_modules` folder, or delete it and `npm i`
npm ci

5. You may have some issues packing or running your application. Try to figure out the problems and fix them. You may need to start over the process and be more careful about what you are removing, or you may try to remove more if the bundle size is still significant.

6. If you are good with it, you need to commit the changes, keep this custom package in your repo and install it every time you build.

Let me know if you have any specific problems.

Have you done another bundle size analysis? It is now version "@azure/communication-react": "^1.23.0",. Things should have changed.

[Leah-Xia-Microsoft]

Hi @DercilioFontes and @greenpau,

We have tracked this issue 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. Thanks.

[greenpau]

@DercilioFontes , thank you for your quick response! Appreciate the help!