React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
REST// ✅ correct
import { Chat, Channel, MessageList, MessageInput } from 'stream-chat-react';
// ❌ Avoid (harder to shake)
import * as SCR from 'stream-chat-react'
// ❌ Avoid re-export from your own index file
export * from 'stream-chat-react'
// ❌ Avoid deep `dist/` path in web codehs or require()
import * as SCR from 'stream-chat-react/dist/components/Avatar/Avatar'Bundle Size
Our SDK is optimized for tree-shaking. That means that bundlers like Webpack and Rollup will remove the unused SDK code from the resulting bundle.
The actual size of the SDK in your application will depend on the components you use and will not equal to the size reported on sites like Bundlephobia that report the total SDK size.
Best practices for optimal bundle size
Besides minifying and g-zipping your app code, here are some tips on how to keep the stream-chat-react contribution to your app as minimal as possible.
Imports supporting tree-shaking
- Use named ESM imports
Don’t use CJS (
require()) in client code when ESM is available.Only import what you render - if you don’t show a component, don’t import it so that your bundler can drop it.
Tree-shaking works with stream-chat-react because it ships ESM builds with granular exports, which modern bundlers understand. When you use named ESM imports and lazy-load optional parts, bundlers can safely drop everything you don’t reference.
Bundlers documentation
The modern bundlers provide documentation on the bundle size optimization. Here is a list of some of them:
| Framework | Links |
|---|---|
| Vite (Rollup) Tree-shaking & Build | https://vitejs.dev/guide/build.html, https://rollupjs.org/introduction/#tree-shaking |
| Webpack Tree-shaking & Code Splitting | https://webpack.js.org/guides/tree-shaking/, https://webpack.js.org/guides/code-splitting/ |
| Next.js Dynamic Imports | https://nextjs.org/docs/app/api-reference/turbopack#bundle-sizes, https://nextjs.org/docs/app/getting-started/server-and-client-components#reducing-js-bundle-size |
| esbuild Tree-shaking | https://esbuild.github.io/api/#tree-shaking |
| General: What is tree-shaking? | https://developer.mozilla.org/docs/Glossary/Tree_shaking |
| React: Code-splitting with React.lazy | https://react.dev/reference/react/lazy |
Bundle size measurement
Some bundle size analyzers by framework are:
| Framework | Links |
|---|---|
| Vite / Rollup: Bundle Visualizer | https://rollupjs.org/introduction/#visualizer |
| Webpack Bundle Analyzer | https://github.com/webpack-contrib/webpack-bundle-analyzer |
| Next.js: Next Bundle Analyzer | https://nextjs.org/docs/app/guides/package-bundling#analyzing-javascript-bundles |
Common gotchas (and easy fixes)
| Question | Answer |
|---|---|
| “My bundle didn’t shrink.” | Usually caused by namespace imports, or deep dist/ imports. Switch to named imports from the root and rebuild. |
| “I removed a component, but it’s still in the bundle.” | Something re-exports it or you import it indirectly. Import only exactly what you render, directly from stream-chat-react. |
| “Styles disappeared.” | Don’t mark CSS as tree-shakable. Check how to import styles for stream-chat-react correctly. |
| “Gallery/emoji added lots of KB.” | Lazy-load those modules. Many libraries ship large data (sprites, emoji sheets). Load them only when needed. |