question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack and ES6 compiling inefficiency

See original GitHub issue

Issue 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:closed
  • Created 6 years ago
  • Reactions:10
  • Comments:16 (7 by maintainers)

github_iconTop GitHub Comments

5reactions
lostpebblecommented, Jul 7, 2017

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:

image

As you can see there is just one large piece of code inside the firebaseui package called npm.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 of firebaseui 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.

4reactions
jscticommented, Mar 9, 2018

Is this fix released yet ? Still having that huge npm.js with firebaseui 2.6.2

Read more comments on GitHub >

github_iconTop Results From Across the Web

Use Webpack to output es6? - Stack Overflow
webpack doesn't compile/transpile anything by default. Depending on your loaders and their config, webpack output's something. most commonly ...
Read more >
Improving Site Performance With Webpack Tree Shaking
Introduction to Tree Shaking · Use ES6 module syntax (i.e., import and export). · Ensure Babel does not compile ES6 module syntax to...
Read more >
Reduce JavaScript payloads with tree shaking - web.dev
In production builds, webpack can be configured to "shake" off exports from ES6 modules that weren't explicitly imported, making those production builds ...
Read more >
Why and How to Use Webpack and Babel with Vanilla JS
Webpack is a module bundler we can use to minify multiple files in a JavaScript project and increase the overall efficiency.
Read more >
Module Methods - webpack
This section covers all methods available in code compiled with webpack. ... Version 2 of webpack supports ES6 module syntax natively, meaning you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found