Firestore import - Bundle size is huge

[maheshkumar2150]

import firebase from '@firebase/app';
import '@firebase/firestore'; // this one is very very huge.

I am using only firestore in my app.
How to reduce the bundle size of firestore?

[google-oss-bot]

I found a few problems with this issue:

• I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.
• This issue does not seem to follow the issue template. Make sure you provide all the required information.

[AutanaSoft]

This way you will only import what corresponds to Firestore

import * as firebase from 'firebase/app';
import 'firebase/firestore';

[maheshkumar2150]

Nope. The size is +36B increased after adding the above code.

[laurentpayot]

@AutanaSoft see #332

[schmidt-sebastian]

@maheshkumar2150 Thanks for reporting! We are aware that there is a lot of room for improvement and are planning to prioritize reducing the SDK size in the very near future.

[maheshkumar2150]

In the mean time, is there any solution?

import firebase from '@firebase/app';
import '@firebase/firestore'; -- increases the bundle size. 

Because of firestore import, the bundle size is huge and loading time is increased and started to lose visitors on my site.

I think firestore is not an optimal solution to websites and webapps right now.
Firestore is very easy to use and very quick for developers. But the size is one of the very very big drawback.

If there is any solution, please tell me to reduce the size.

[maheshkumar2150]

Hi

Can you please suggest me how to make backup firestore data and implement it in mongodb?
It seems size is matter for web app.

Google analytics shows the app takes around 1 min to load for the first time which is really bad.
I am from India. The network is not super fast here.

[schmidt-sebastian]

@maheshkumar2150 We currently don't have a MongoDb specific export functionality. Please take a look here to see if this works for you: https://firebase.google.com/docs/firestore/manage-data/export-import
If you are interested in better support for this, please file a dedicated feature request.

[maheshkumar2150]

Hi

What is dedicated feature request?
import { ...,...,....} '@firebase/firestore';

Is something like that possible? Or do i have to import the whole firestore package?

[maheshkumar2150]

Hi

I am thinking to convert the reactjs application to next.js
Just to use firestore, i am about to convert the web app.

Is it possible to use firestore in node server?
Will it reduce the bundle size?
Please share some tutorials regarding this.
I am not able to find it.

[schmidt-sebastian]

Our Node module for Servers is https://www.npmjs.com/package/@google-cloud/firestore

[GuilhermeBCC]

"1 min to load for the first time" 😨
You've already checked for an issue with your app, I don't think this is a normal time.
As your case should be from low networks, I think you better use the REST API link

[maheshkumar2150]

I am using firebase hosting and firebase firestore.

What are my chances?
I am recreating the app with nodejs server.

Is it easy to move the firebase hosting to zeit hosting?
So, i can keep the firebase firestore as backend and nodejs based frontend in zeit hosting.
I believe it will reduce the loading time,

Right now, the app is designed with reactjs.
I am changing it to next.js

Is this the right solution?
Is there any better option available?

[schmidt-sebastian]

@maheshkumar2150 I am not sure I fully follow, but our Server SDKs can run on any Node 8 environment.

[maheshkumar2150]

@maheshkumar2150 I am not sure I fully follow, but our Server SDKs can run on any Node 8 environment.

Hi,

Thanks. I am actually coded the app using create-react-app. Now, I am converting the app to server side rendering. So i can reduce the firebase SDK size.

I have just checked Firebase Rest API.
Is there a chance that i can use it without any authentication token?

[mikelehen]

I believe that would only work if you don't have any security rules, which would not be recommended for a production app.

[pjbrown11]

@maheshkumar2150 Thanks for reporting! We are aware that there is a lot of room for improvement and are planning to prioritize reducing the SDK size in the very near future.

Bundle size is the only drawback I've encountered (and it is a major one to me) with Firebase and it's great to hear that this is coming up in priority!

[laurentpayot]

@pjbrown11 I could make the size less annoying by using firebase (auth+firestore) in a worker thread: see #983

[pjbrown11]

@pjbrown11 I could make the size less annoying by using firebase (auth+firestore) in a worker thread: see #983

Interesting approach. Thanks for sharing!

[maheshkumar2150]

Good. Actually i am using code splitting and firebase is not loaded on my homepage.
The team still has to work and reduce the bundle size as low as they can.

Everyone is using react, angular or other frameworks which itself little big for web apps. Adding firebase completely spoils the size.

We need reduced firebase sdk. That is the permanent solution.
I started to use node and mongo just because of the webapp size.

Please give high priority and reduce the bundle size.

[lukehtravis]

+1 ! Firebase sdk currently taking up 453 kb of space on my app. that's almost as big as just about everything else combined in a create-react-app app

[wiesson]

Page                Size
┌ * /               3.09 kB
├   /_app           651 kB
├   /_document
├   /_error         1.96 kB
└ * /products/[id]  3.82 kB

σ  (Server)       page will be server rendered (i.e. getInitialProps)
*  (Static File)  page was prerendered as static HTML

Same for me - the pages are quite small, but with firestore included, my app folder gets quite big..

[mafergus]

I love Firebase but it's crazy right now guys, firestore + auth is ~500kb of bundle.

[Plantain]

@schmidt-sebastian is there a roadmap for reducing the bundle size? I saw there is some progress in #2495, but I'd love some guidance on whether there's more coming - currently the bundle size makes it a non-starter for us, but if there's more substantial improvements coming I'd love to get started building on Firebase.

[schmidt-sebastian]

When the mangled version of Firestore is released, our bundle size will go down by about 9% gzipped. We are also looking at releasing an ES6 only version (for our prebuilts that we push to CDN, since this can be done already using our NPM builds), which shaves of another 10%. Furthermore, we are looking at making offline persistence optional might again will have a similar amount of savings (as a rough estimate).

We are also in the early stages of figuring out how we can best reduce the bundle size for Auth and might release a tree-shakeable version at some point that will allow you to only depend on the Auth providers that you need.

[laurentpayot]

Unfortunately not many changes since a year ago. I guess we have to be patient 😉

[schmidt-sebastian]

Along with the tree-shakeable client, we are also preparing a "Lite" SDK that uses the Rest API and will be much smaller in size, albeit without persistence or snapshot listeners.

[samuelgozi]

Along with the tree-shakeable client, we are also preparing a "Lite" SDK that uses the Rest API and will be much smaller in size, albeit without persistence or snapshot listeners.

You can use my code. It’s open source 😉

[samuelgozi]

@maheshkumar2150 not official but you can use my libs for that until the official one arrives.

[maheshkumar2150]

@maheshkumar2150 not official but you can use my libs for that until the official one arrives.

Good work.
I am thinking to use yours.

Just one doubt. Is it like api? Have you written/hosted this in any server?
Because, i want to just know how will it affect the traffic and perform on bigger sites?

[samuelgozi]

@maheshkumar2150 its a client side JS library, so other than including it in your bundle on the front end nothing else is needed. And it is very small and performs very well. I'm confident that in that regard there is not much to improve.

[maheshkumar2150]

Thank you so much. How genius you are!

[maheshkumar2150]

@maheshkumar2150 its a client side JS library, so other than including it in your bundle on the front end nothing else is needed. And it is very small and performs very well. I'm confident that in that regard there is not much to improve.

I am started to work with your library.
If the official version is launched, will the coding work?
Do i have to redo all the work again?

[wilhuff]

Please, let's keep discussion on topic. There are many people on this thread that are listening for updates about the official libraries. Ongoing discussion about alternatives should take place elsewhere.

[maheshkumar2150]

Please, let's keep discussion on topic. There are many people on this thread that are listening for updates about the official libraries. Ongoing discussion about alternatives should take place elsewhere.

I opened this issue on 2019 October. I am very happy the team is working to fix the problem.
I am paying firebase these days and i really have to fix the issue on my web apps. (Slow loading because of the size firestore)

@samuelgozi is promising and i don't want any issue on apps until official is launched. I believe i am the one who is waiting for very long time for the officials to come up with the minimized size than others.

Not taking this topic to off topic. Just two/three chats are not going to spoil and it might help others.
Everyone in the end is going to use the official release.

[figmentc]

Along with the tree-shakeable client, we are also preparing a "Lite" SDK that uses the Rest API and will be much smaller in size, albeit without persistence or snapshot listeners.

This would be awesome. Will the Lite sdk encompass other firebase libraries aside from firestore? Namely auth as it has implications with Firestore security rules.

[schmidt-sebastian]

Lite will work with Firebase Auth.

[GriffinJohnston]

I'm so excited that you guys are releasing an official "lite" version. Persistence and real-time are awesome features, but the majority of projects probably don't need them, and it doesn't feel great carrying all that weight around for no reason. It feels like the FB team is listening to developers and moving in the right direction. Appreciate cha.

[wenzf]

Without using functions, is there any official Rest API for cloud firestore?
@maheshkumar2150

Firestore can be accessed with a Rest API:

• how to do a request
• documentation

[MALIK-0]

Hey guys are there any news on this?
I'm doing some Svelte Project and wanted to use Firestore.
I dropped my jaw after I saw the increase of about 450kb :D

@schmidt-sebastian Can you give an estimate about the file size of the upcoming version? Also it would be nice to know if you recommend using the current version of Firestore and then swapping to the new version (I'm asking because of breaking changes).

Last and final question. Is the Real Time Database significant smaller? For my case, I could also go with Real Time Database.

Thanks and have a nice day 👍

[schmidt-sebastian]

I need a couple more days to work on this and am waiting on some code reviews. We are currently going through performance reviews and hence everyone is 110% busy doing non-code work.

Here are some size samples:

getDoc (Lite): 40 kB (13 kB gzipped) vs. 309 kB today (85 kB gzipped)
setDoc (Lite): 43 kB (14 kB gzipped) vs. 309 kB today (85 kB gzipped)
getDoc+setDoc (Lite): 51 kB (16 kB gzipped) vs. 309 kB today (85 kB gzipped)
getDoc: 158 kB (51 kB gzipped) vs. 309 kB today (85 kB gzipped)
getDocFromCache: 117 kB (38 kB gzipped) vs. 309 kB today (85 kB gzipped)
setDoc: 158 kB (51 kB gzipped) vs. 309 kB today (85 kB gzipped)
getDoc+setDoc: 163 kB (53 kB gzipped) vs. 309 kB today (85 kB gzipped)
onSnapshot 160 kB (51 kB gzipped) vs. 309 kB today (85 kB gzipped)

These are the bundle sizes of Firebase App + Firestore using ES5/IIEFE with Rollup & terser. As stated, Firebase Auth is not ready yet. I am still working on tearing getDoc and setDoc apart even more, which should further reduce the size of the individual imports.

[maheshkumar2150]

hi

how is it going? any news for us?

[schmidt-sebastian]

Okay, here we go. Huge heads up: The release I am about to talk about is VERY experimental. We have not tested it thoroughly in any way. It does not work with Firebase Auth (as the auth rewrite is not yet ready), so we recommend testing against the Emulator. We only published this release now since I am going on vacation next week and you have all been waiting for years :)

You can install the modular Firestore SDK from npm: npm install firebase@exp. The only products we have available so far are @firebase/app, @firebase/functions, @firebase/firestore. @firebase/auth and @firebase/storage are likely next, with all others after.

Sample usage:

import { initializeApp } from '@firebase/app';

// Release with latency compensation, snapshot listeners and cache
import { getFirestore, doc, getDoc, setDoc } from '@firebase/firestore';

// Or Lite SDK (which uses Rest API, offers no cache or listeners and is much smaller)
import { getFirestore, doc, getDoc, setDoc } from '@firebase/firestore/lite';

const app = initializeApp({ /* ... */ });

async function main() {
	const db = getFirestore(app);
	const doc1 = doc(db, 'coll/doc');
	await setDoc(doc1, {});
	const snapshot = await getDoc(doc1);
	console.log(snapshot.data());
}

main();

There are still some major TODOs to make the SDK more tree-shakeable, but at this point we are mostly looking for comments on the API surface. The best "documentation" is https://github.com/firebase/firebase-js-sdk/blob/master/docs-exp/index.md. You can also take a look at the TypeScript definition files https://github.com/firebase/firebase-js-sdk/blob/master/packages/firestore/lite-types/index.d.ts (Lite SDK) and https://github.com/firebase/firebase-js-sdk/blob/master/packages/firestore/exp-types/index.d.ts (Full SDK)

We will also provide a compatibility layer that will allow you to migrate your code slowly from the existing API to the new API.

[hamishjohnson]

enjoy your holiday, you deserve it!

[spencerbn]

Any updates on the auth changes?

[Feiyang1]

@SpencerLawrenceBrown We have merged it into master, and is in the final stage before making an alpha release. Please stay tuned!

[HunterJoey]

@Feiyang1 Are the team waiting for FirebaseSummit on October 27-28 to release this update?

[samtstern]

@schmidt-sebastian @Feiyang1 any reason we have both this and #332 open? Maybe we should consolidate the discussion on #332 now that the exp libraries are getting closer to reality.

[Feiyang1]

yeah, we will track it in #332. Closing