This repository was archived by the owner on Apr 17, 2023. It is now read-only.
Load Firebase asynchronously. #77
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
niniane
approved these changes
Aug 17, 2019
Update src/firebase/index.ts to export getFirebase, getAuth, getFirestore, getFunctions, and getFirebaseUI functions that load the corresponding Firebase modules asynchronously. This lets webpack create separate chunks for each piece of Firebase, reducing the app entrypoint from 1.12 MiB to 593 KiB. It also improves Lighthouse measurements for the login page on a simulated 3G network with 4x CPU slowdown: First Contentful Paint: 3.1s -> 2.4s Time to Interactive: 3.5s -> 3.0s First Meaningful Paint: 3.2s -> 2.4s First CPU Idle: 3.3s -> 2.9s I'd expected an improvement here, since the login page doesn't depend on Firestore. It's harder to tell if there's a benefit on the other pages. They all require login, which means that "Clear Storage" needs to be unchecked in Chrome's Dev Tools Audit tab, which I think means that the cache is preserved, so download time doesn't get measured. See GoogleChrome/lighthouse#2599 for more discussion of this. It stands to reason that there would be less benefit there, though, since all of those pages require both the auth and Firestore modules to be loaded before they can do anything meaningful.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Update src/firebase/index.ts to export getFirebase, getAuth,
getFirestore, getFunctions, and getFirebaseUI functions that
load the corresponding Firebase modules asynchronously. This
lets webpack create separate chunks for each piece of
Firebase, reducing the app entrypoint from 1.12 MiB to 593
KiB.
It also improves Lighthouse measurements for the login page
on a simulated 3G network with 4x CPU slowdown:
First Contentful Paint: 3.1s -> 2.4s
Time to Interactive: 3.5s -> 3.0s
First Meaningful Paint: 3.2s -> 2.4s
First CPU Idle: 3.3s -> 2.9s
I'd expected an improvement here, since the login page
doesn't depend on Firestore.
It's harder to tell if there's a benefit on the other pages.
They all require login, which means that "Clear Storage"
needs to be unchecked in Chrome's Dev Tools Audit tab, which
I think means that the cache is preserved, so download time
doesn't get measured. See
GoogleChrome/lighthouse#2599 for
more discussion of this. It stands to reason that there
would be less benefit there, though, since all of those
pages require both the auth and Firestore modules to be
loaded before they can do anything meaningful.