Client Bundle Size
Hi, I’m currently evaluating Convex to migrate from a Firebase SPA (Firestore flavor).
I have a question about the size of the Convex client JS bundle. How much JS do browsers have to download before starting using Convex?
5 Replies
The total size of your bundled function code in your convex/ folder is limited to 32MiB (~33.55MB). Other platform limits can be found here. website.
Bundling | Convex Developer Hub
Bundling is the process of gathering, optimizing and transpiling the JS/TS
@Laurent the functions limits above are for the server, for your client question: very little! not sure exactly, ballpark 50Kb?
It used to be more but Guillermo, the Next.js creator and Vercel CEO complained about the size if it. So we got this down significantly. Do you have specific low bandwidth needs @Laurent?
@ballingt I do not exactly have specific low bandwidth needs, I’d rather say I have speed and SEO needs 😉 When we look at https://cdn.jsdelivr.net/npm/convex/dist/,
browser.bundle.js is 108.58 KB and react.bundle.js is 119.81 KB, but the data transmitted on the wire is respectively 23.0 KB and 26 KB thanks to the brotli compression. This is actually pretty good compared to Firebase. Firebase, even v9+ with tree shaking, is so bloated that to keep my SPA lighthouse score above 98% I had to use the REST API for the first load of my app while in parallel downloading 95 KB (brotli) of Firebase stuff (Firestore, auth, storage) in a web worker that I use for next app loads. Plus 25 KB (brotli) of an OAuth chunk when needed. I am definitively going to give Convex a try to see if it is as good as it looks! 👍@Laurent these pre-bundled versions are bigger than is usually realistic because they aren't minified (see https://unpkg.com/browse/convex@1.15.0/dist/react.bundle.js) and can't do any tree-shaking. If you use use your own bundler (the way these are usually used unless your project doesn't have a build process and you use
<script> tags directly) they should be smaller.
If you're loading these directly from script tags it's be great to hear about it, we could add a .min.js for each of these.@ballingt I didn’t notice they were not minified. That’s even better actually, as you said they should be even smaller once minified and eventually tree shaken. I use Vite (Rollup) as a bundler with terser as my minifier. I’m currently setting up a test repo to get real world numbers about the final client bundle size (database + auth + storage). I will let you know my results.
Back. I found out that with a simple query feed and basic Google OAuth my app only grew around 20Kb. I’m not using all the features but that’s quite nice already 👍