FirebaseExtended / FirebaseExtended/reactfire

Reactfire preventing lazy loading of firebase modules

Abierto
#488 7 comentarios 1 reacción 1 asignado Reclamado por @jhuleatt Ver en GitHub
v5
Lenguaje dominante
TypeScript
Estrellas
3.6k
Forks
403
Merge medio
14 h 53 min
PR fusionados (30 d)
5

Descripción

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.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.