Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Reactfire preventing lazy loading of firebase modules

Aperta
#488 7 commenti 1 reazione 1 assegnatario Vedi su GitHub

@jhuleatt ci sta già lavorando.

Dal 19/11/2021.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

v5

When using ReactFire I want to lazy load Firestore to reduce build initial build size and improve load times. When using ReactFire lazy loading firestore does not happen even while using import('firebase/firestore').

I have included a version that does not use ReactFire with working lazy loading as shown by the initialisation time.
I have also included a version that does use ReactFire where I am trying to use lazy loading but I believe it is not working.

I noticed this in a Nextjs project with the bundle analyzer but haven't included Nextjs in the examples for simplicity.

Version info

React: 17.02

Firebase: 9.4.1

ReactFire: 4.2.1

Test case

Test case without using ReactFire and lazy loading working:
https://codesandbox.io/s/blissful-scott-05qj6?file=/src/App.tsx
https://csb-9c5hc.netlify.app/

Test case with using ReactFire and lazy loading not working:
https://codesandbox.io/s/elegant-roentgen-2iyt8?file=/src/App.tsx
https://csb-2iyt8.netlify.app/

You can use the network tab to see that 6 networks requests are made without ReactFire but only 5 are made with using it, you can also see the breakdown of chunks in the lighthouse analysis.

Lighthouse Treemap without ReactFire
Lighthouse Treemap with ReactFire

This is quite a big blocker for me so any help would be appreciated.

Steps to reproduce

Open the two codesandbox's/netlify deployments above.

Expected behavior

Firestore is loaded in a separate chunk.

Actual behavior

Firestore is loaded in the initial chunk.

Lingua principale
TypeScript
Stelle
3.6k
Fork
403
Merge medio
5g 1h
PR unite (30g)
10

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di FirebaseExtended/reactfire

Tutte le issue di FirebaseExtended/reactfire

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.