Importing only auth package from firebase module

Question

This SO thread highlights how you should import distinct firebase functionality into your web app.

In my VueJS SPA, I want to only include firebase/auth into my web app. According to the thread, the following snippet is all that is required.

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

Unfortunately, the answers/comments in that thread do not specify where exactly this import needs to go and don't explain any part of the snippet either.

I tried adding the above code in my main.js file (the entry point of my app and also where I initialise firebase); however, the entirety of firebase is still bundled into my app after altering my import statements accordingly (as shown below).

My question is, where else do I need to include the above snippet in my web app? Do I need to include both import lines every time I import firebase into a Vue component that uses firebase functions?

Additionally, I feel like my question stems from a lack of understanding of what's actually happening with the imports. Why do we have to import * as firebase and then import 'firebase/auth'?

This Medium post also demonstrates importing specific firebase packages and references 'tree-shaking' but doesn't explain much further. Reading the docs on 'tree-shaking' helped me understand the concept but not how it works in relation to the firebase example.

Note, I'm currently using Webpack v3.6.0 as my bundler.

Answer 1

firebase/app is the core firebase client. Everything else is optional services.

By using import firebase from "firebase/app" You get the core functionality that firebase provides, that means you may not need to use firebase/auth, firebase/firestore, firebase/functions and only use the services that your app requires, reducing the amount of code needed for your app to run.

There are a number of ways to import firebase. However, In all of my projects I have a separate firebase file that I import when ever I require to use any firebase service.

Example

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/functions";
import "firebase/storage";
import "firebase/messaging";
import "firebase/database";

const config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  messagingSenderId: "",
  projectId: "",
  storageBucket: ""
};

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const firestore = firebase.firestore();
firestore.settings({ timestampsInSnapshots: true });
firestore.enablePersistence({ experimentalTabSynchronization: true });


export { firebase };

And use the following to import

import { firebase } from "path/to/file"

Update

experimentalTabSynchronization has been deprecated use synchronizeTabs instead.

The timestampsInSnapshots setting now defaults to true and you no longer need to explicitly set it.