firebase.js is JUST HUGE (and what can we do about it)

He is really huge - just look at him:

This piece weighs 103kb (compressed). More than an application code - an online store - (58kb) and comparable to all the other code in the vendor bundle (156kb) - including react , react-dom , react-router , moment.js , lodash and a bunch of other libraries. Worse yet, firebase not needed on all pages, and very often it is not needed by the time the site loads.

What can you do about it?

Not too much, as it turned out. The inclusion of individual modules did not work (at that time in the webpack @ 2) and it would not help too much - you would still need to enable auth and the database + app module (42kb + 40kb + 3kb) - which would give 83% of the original size one way or otherwise. In addition, the auth and database modules themselves are completely monolithic (as can be clearly seen in the screenshot above) and are now better compressed.

By the way - they are compressed with the help of Clouse Compiler or what Google is currently using there - good luck minifying the band with uglify and not breaking anything.

But something needs to be done!

Of course. 103kb code wallowing dead weight in a bundle is very unpleasant. Think about it - people complain about the size of react and go to inferno / preact - and react + react-dom weighs only 39kb in compressed form and they work endlessly.

But since it is impossible to reduce the size of this piece - we simply postpone its loading until it is really needed.

And we will do it so that no one will notice :)

Webpack and dynamic import to the rescue

For the server, this is extremely simple:

 // firebaseImport.server.js import * as firebase from 'firebase/firebase-node' export default function importFirebase() { return Promise.resolve(firebase) } 

For the client - a little more complicated, but still simple:

 // firebaseImport.browser.js export default function importFirebase() { //  import,  Promise // ""         //   `0.js` return import(/* webpackChunkName: 'firebase' */ /* webpackMode: 'lazy' */ 'firebase/firebase-browser') } 

All this is necessary for universal rendering on the server. If your application works only on the client - just ignore the server side.

Next you need to make a polymorphic import in the webpack-config:

 // browser webpack-config resolve: { alias: { 'firebaseImport$': path.join('path', 'to', 'your', 'firebaseImport.browser.js') } } // ... // server webpack-config resolve: { alias: { 'firebaseImport$': path.join('path', 'to', 'your', 'firebaseImport.server.js') } } // ... 

Yes, we are building a webpack server. Try not to condemn us, we need working import in the universal code, and node.js does not understand them natively.

Now require(firebaseImport$) returns a Promise which is immediately executed on the server and which will lazily load the firebase on the client. After the first download on the client, this import will also become 'completed', and subsequent calls to firebase will be almost instantaneous.

Next, you need to initialize the firebase client:

 export default function firebase() { return importFirebase().then((firebase) => { //   firebase.  -  : const app = firebase.initializeApp({ apiKey: '<your-api-key>', authDomain: '<your-auth-domain>', databaseURL: '<your-database-url>', storageBucket: '<your-storage-bucket>', messagingSenderId: '<your-sender-id>' }) //    : return { database: app.database() auth: app.auth() } }) } 

And actually everything. Of course, now the use of firebase has become more verbose:

 // : import firebase from 'what/ever/firebase' const {auth} = firebase export function signIn({email, password}) { auth.signInWithEmailAndPassword(email, password) .then((user) => { // ... }) } // --- // : import firebase from 'what/ever/firebase' export function signIn({email, password}) { firebase().then(({auth}) => { auth.signInWithEmailAndPassword(email, password) .then((user) => { // ... }) }) } 

But the result is worth it:

A few extra points

• You need to remember to add error handling via catch() to all promises (well, report them);
• firebase.js can be obtained on the client at the time of loading the main bundles in most browsers by simply adding <link rel="preload" href="/assets/firebase.js" as="script"> to the head ;
• The initialization of the firebase can be a row with the webpack 'a hot-loader , we were helped by the use of the default application and not the named one ( https://firebase.google.com/docs/web/setup );
• It is extremely useful to run webpack-bundle-analyzer from time to time - the size of some packages may surprise you unpleasantly (momen.js and its locales may even shock);
• The post is located in the react.js hub because I say webpack — I mean react , but (obviously) this method does not depend on either the reactor or the firebase, it can be used for any libraries that are needed “lazily”;