Firebase-js-sdk: How to only load the Firebase dependencies I need?

Created on 23 Apr 2018  路  6Comments  路  Source: firebase/firebase-js-sdk

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.

needs-triage

Most helpful comment

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.

All 6 comments

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

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

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.

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

@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..

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.

Was this page helpful?
0 / 5 - 0 ratings