FirebaseExtended / FirebaseExtended/reactfire

Reactfire preventing lazy loading of firebase modules

Offen
#488 7 Kommentare 1 Reaktion 1 zugewiesene Person Beansprucht von @jhuleatt Auf GitHub ansehen
v5
Vorherrschende Sprache
TypeScript
Sterne
3.6k
Forks
403
Ø Merge
14 Std. 53 Min.
Gemergte PRs (30 T.)
5

Beschreibung

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](https://googlechrome.github.io/lighthouse/treemap/?gzip=1#H4sIAAAAAAAAE51Xy27jNhT9lUCrDmBLJCWKYlZtZ5btKs2qCAY0dW0zI1EqSSUxAv97KXsy0INy1VmK5D33de5D71F1NNH9e2Tgnw6sg/LRVNF9dHSutfdJIu1uyyU9yliDq9T+FIu2TaJNtFdaVCvfiq5UzvZarDSqdVtnAGrRbkvhRH+sSg8TuttETrkK/O3D5fbur+vt3ZfrbQlXKdVo/+bRQnm3b8zdd4w7r98/srIxHkJ3VfX944uybSVOfzZlD620l6mFUy9wgXRCVRdr3ant7ycWaS/lr/9+j7SoYY3/BmzTGQm/n1wvSVLCzpuV4tZ5w2TybJM0FgWlUEgRy2Onv8XPNoDNOKN4E3W688H4OKS8yNNNJI+qKg3oofFxnPQOfa2bsqsgiEgpozPEAhMcRvx1rwzshIUQVsoxmWHlPOVhrB7KOp+xpFTWJUqX8BaDrQnCLOx/ijgvphow96eDkL/CTh6F1lBtX42PMpi1+BnhOJvAp6zI0PlpgN+aRoK1yc40rxZMEAnnfUpGQBgXZITzS6fr3rzyU8ASzPKpPMvG8mupReLd3jMEcXSDWpgigthEJbu6EWZWACMrCjw1m+EsJ/8Do0DZNAUY5XSBQtbIOUaOEJpAUB/QMIJstA+VdjZ2IUYUM7rlaJADaU6tC0qSIiBKh7Il7MEYKMPi+awqczIQhrqrhK+doDDN5v4PNYN+UabRNeiw7UU2Nd2fDOWNaUw4YHk6tZuSbCDa7J7D/vJZ5+BDf2VTtyJs7YwvGR7ViW+CQZpggshU1Bu7QNbegEYvRSyb9Q0yivhtlmGU8XGDeVElhHObslmZ4hynk1BdLP3qtfpxpxeQaDYDYiMzPMH62flHcziAeQDzoiSEbcJ82jVxPkCqLggLeUfTjkHSdMgYpR0Yv46E486mTOfZOqJSggcPP6bab227UBG36SlaFc4szqb1gPNhsgwc/GwC89mPwc8fiVtiyXT0YzyKUz/egukZlcPyOzKec7c3B5wixhZqxYCQLtAb8n46hASe7dvWdNqpGsLTic0c+M9nMvQip8U0kRnBC7vOxY3YV2PZyX4JjWulg3opn9GjRx2l2UNth26ugM0vi8fTbWTfUMFDC2vVQSfLseGzXpemxczCsqlDJC4uTScUo2WFhKTjbCQ/VKxx3ivNill7poSxWUSup6MFsBXyW7LrvL1KJ4eq2fn+EdSSDqvYyiP0dDeBRpPyhU1oPR2TH/hrApClsxWQB5wPneWoQOnqXRP7tX3a3BD+qVWz9tMmJryg+3x/60cGI4rC0bw24Le5CBtNlI8mFnhYkJV+E9rv00/n83nTz+e9OjyAc0ofLr+HVSNFdV2Wto8PkX/1L4gw8ppODwAA)
[Lighthouse Treemap with ReactFire](https://googlechrome.github.io/lighthouse/treemap/?gzip=1#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)

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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.