Webpack and ES6 compiling inefficiency
See original GitHub issueIssue
When importing Firebase UI js as an ES6 module and compiling with Webpack + Babel (though I expect the same is true of a require
setup) you end up with unnecessarily large filesizes.
Thoughts
There is a greedy import at the top of npm.js
in the package. require('firebase')
imports the entire Firebase library as a dependency. Is this necessary?
For an application only using auth the efficient way to load Firebase through modules is:
> ES6
import * as firebase from 'firebase/app';
import 'firebase/auth';
> Require
var firebase = require('firebase/app');
require('firebase/auth');
But when Firebase UI imports the entire module as a dependency, your final build will include firebase/storage
and firebase/database
despite those not being dependencies of Firebase UI (from what I can tell).
Proposed solution Change the import to:
var firebase = require('firebase/app'); require('firebase/auth');
If in fact only the Auth component is needed.
Interim solution
I’m using my compiler (Webpack) to replace var firebase = require('firebase')
with var firebase = require('firebase/app'); require('firebase/auth');
in Firebase UI.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:10
- Comments:16 (7 by maintainers)
Top GitHub Comments
Made a similar issue a while back #133 . No real response about it yet.
I must say that the way this library has been packaged is very wasteful. Also, it seems most of the other dependencies that the code uses are pre-bundled into the library, further preventing optimizations… at least from what I can see from my bundle analyser. Here’s a screenshot:
As you can see there is just one large piece of code inside the
firebaseui
package callednpm.js
- which I assume is all the bundled up dependencies that it uses (and it is clearly a lot of code). If you look at the other libraries, you can see a much more modular approach which allows libraries to share code when there are overlaps.BTW, the only reason my Firebase module has been pulled out and set aside, as you can see in this bundle, is because I’ve aligned the versions of Firebase I use to exactly what
firebaseui
uses - so there is no possibility of duplication. Not ideal because Firebase versioning in my app is completely at the mercy offirebaseui
now.For the seemingly simple tasks this library sets out to solve, there is way too much bloat. Considering just wrapping the basic functionality myself over the base Firebase libraries.
Is this fix released yet ? Still having that huge npm.js with firebaseui 2.6.2