search

FirebaseExtended / polymerfire

Polymer Web Components for Firebase
https://www.webcomponents.org/element/firebase/polymerfire
MIT License
459 stars 142 forks source link

Depend on Firebase SDK ^4.1.1, removing loading caveat. #225

Closed mbleigh closed 7 years ago

mbleigh commented 7 years ago

Since the newly-shipped 4.1 version of the Firebase JS SDK now supports lazy loading, we no longer need to provide guidance about how to load Polymerfire. It should "just work"!

/cc @jshcrowthe

abdonrd commented 7 years ago

Nice! 👏

When a new polymerfire release? :)

e111077 commented 7 years ago

@abdonrd new release is out

abdonrd commented 7 years ago

@e111077 thanks! 👏

FluorescentHallucinogen commented 7 years ago

Does it mean that now it's possible to use https://github.com/Polymer/lazy-imports? Something like

<link rel="lazy-import" href="bower_components/polymerfire/firebase-app.html" group="lazy">

or I don't understand something?

FluorescentHallucinogen commented 7 years ago

Is it possible to use async attribute? Something like

<link rel="import" async href="bower_components/polymerfire/firebase-app.html">

Sorry for the noob question, but what the difference between “lazy” and “async”? Is it possible to use them together?

Is it possible to use <link rel="preload"> and/or <link rel="prefetch"> for import web components? Something like

<link rel="preload" as="import" href="bower_components/polymerfire/firebase-app.html">
<link rel="prefetch" as="import" href="bower_components/polymerfire/firebase-app.html">

If yes, how it works together with “lazy” and “async”?

P.S. Looks like I have no idea what the hell I'm doing in the pursuit of improving loading performance… 😕

e111077 commented 7 years ago

This means that you can indeed load it whenever you want in your application. The answer should be yes for all of the suggested loading techniques you asked about.

Though this is not necessarily the best place to discuss this: Lazy loading is a concept where you load a resource when you need it instead of everything at once.

Lazy-import is just a declarative way to lazy-load and has some promise sugar to help with lazy loading.

Async imports are fetching immediately but do not block load or scripts. Without async, no scripts after the import will run, but with async they will run in parallel with the html import.

I recommend reading this, looking at the snippets here, reading up on async for scripts as it is the same concept, and probably suggesting using lighthouse if you're building a PWA and want simple metrics.

If you have any other suggestions, I recommend continuing this conversation on the Polymer Slack