Skip to content

How to only load the Firebase dependencies I need? #715

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
corysimmons opened this issue Apr 23, 2018 · 6 comments
Closed

How to only load the Firebase dependencies I need? #715

corysimmons opened this issue Apr 23, 2018 · 6 comments

Comments

@corysimmons
Copy link

corysimmons commented Apr 23, 2018

image

Half my app is Firebase.

firebaseui, database, app, and auth are fine, but I'm not even using storage, messaging, util, or logger.

I have to import * as firebase from 'firebase' so I can do things like firebase.initializeApp(config) and firebase.auth.GoogleAuthProvider.PROVIDER_ID.

Is there some way I can get rid of those unused packages and shave 100kb off my PWA? :\


Update:

I tried https://www.npmjs.com/package/@firebase/app as well to no avail.

@google-oss-bot
Copy link
Contributor

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

@google-oss-bot
Copy link
Contributor

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

@corysimmons
Copy link
Author

Seems like if I do import { auth } from '@firebase/auth' instead of import { auth } from 'firebase' it only loads the stuff it's actually using.

@corysimmons
Copy link
Author

Oh no, never mind. That breaks calls like auth().signOut(). Back to loading everything whenever I do import { auth } from 'firebase' 😩

@corysimmons corysimmons reopened this Apr 23, 2018
@codinronan
Copy link

@corysimmons you are not alone. I have tried using the scoped packages but while it may build, almost everything breaks. It's fine, this is a packaged mobile app for me so the extra few compressed KB are ok but I know for web apps it's a big deal..

@jshcrowthe
Copy link
Contributor

jshcrowthe commented May 1, 2018

So we do have a solution here, it's not as optimal as it could be, but it is better than using those things you are not!

Note: See https://medium.com/@jshcrowthe/lazy-loading-with-firebase-4-1-x-c51f67a51f56 for a blog post highlighting some of these points, the same principles apply to module builds and are explained below

The following will get you a firebase namespace, with only database, auth, and app.

import firebase from 'firebase/app';
import 'fireabse/database';
import 'firebase/auth';

// Do firebase things...
firebase.initializeApp({...})

If you attempt to reference firebase.storage or firebase.messaging your app will throw an error. You will have to manually include those things you need (but for PWAs this is expected).

As @codinronan mentioned the scoped packages are not recommended for direct usage (though we use them to build the firebase package itself), hence why they have a major version of 0 (meaning they can break at any time).

@firebase/util and @firebase/logger are transitive dependencies of database, and should not be removed.

We are actively working on the story here and will keep you posted.

@firebase firebase locked and limited conversation to collaborators Oct 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants