Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Reactfire preventing lazy loading of firebase modules

Aberta
#488 7 comentários 1 reação 1 responsável Ver no GitHub

@jhuleatt já está trabalhando nisso.

Desde 19/11/2021.

Avaliação

Esta issue ainda não foi avaliada.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
3.6k
Forks
403
Merge médio
5d 1h
PRs com merge (30d)
10

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de FirebaseExtended/reactfire

Todas as issues de FirebaseExtended/reactfire

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.