Using Firebase with webpack? You might be able to save 220kb

Simon Wicki
Aug 22, 2017 · 1 min read

In a lot of tutorials I came across the comfortable solution of just adding import * as firebase from 'firebase' for your firebase import. As it turns out, there are 4 modular packages for Firebase. Here they are along with their sizes:

  • firebase/app: 22.1kb .initializeApp(firebaseConfig)
  • firebase/auth: 147.6kb .auth()
  • firebase/database: 139.8kb .database()
  • firebase/storage: 51.2kb .storage()

Usually you might not need all of these Firebase services and can require() or import just what is needed — with the help of webpack’s Tree Shaking.

Code

before:

after:

This will tell webpack (or whatever bundler you use) that they should also include storage and database. You can then still use firebase.storage().ref(...) in your code.

Applied example

Let’s assume you only want to take advantage of Firebase’s great Database. Instead of adding 360.7kb, you’d only have to add the firebase/database that imports 139.8kb.

Resulting in 220,9kb saved (61%)!

)

Simon Wicki

Written by

Former Head of Frontend at @JustWatchcom. Co-organizer of @IonicBerlin. Creator of Notyfy. Book lover.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade