FirebaseExtended / FirebaseExtended/reactfire

Reactfire preventing lazy loading of firebase modules

未关闭
#488 7 条评论 1 个 reaction 已指派 1 人 已被 @jhuleatt 认领 在 GitHub 查看
v5
主要语言
TypeScript
星标
3.6k
派生
403
平均合并
14 小时 53 分钟
30 天内合并 PR
5

描述

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.

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。