@firebase/database included in the final build while I only use firestore

In my app I only provide firestore and I don't use a real-time database but I see it increasing my bundle size. Any advice? (I don't have it imported anywhere).

@MaciejCaputa

Hi @MaciejCaputa, I think this might be related to an issue I'm investigating #488 (comment).

Just curious, what build tool are you using, and can you please confirm that you have tree-shaking enabled in your build?

@jhuleatt

Hi @jhuleatt I am still running into this issue using the following. Webpack is properly tree-shaking other libraries but reactfire is still loading firestore and storage.

Dependencies

firebase@9.8.4
reactfire@4.2.1
react@17.0.2
webpack@5.73.0

The only firebase imports we are using are "firebase/auth" and "firebase/app".

This is our treemap of the firebase bundle from Lighthouse:

Hey there, got the same issue, I just pulled all my hairs out my head to know what libraries was causing this.

finally I just did a little hack with the webpack config by using https://webpack.js.org/configuration/externals/

config.externals = { 'firebase/database': 'root Math', };

this hack force remove the firebase/database dependency out of the bundle.
why putting Math ? because webpack will add a small line in the bundle : "e.exports=math", so I used a builtin package to export to not crash the whole app

@alexduhem

Thanks all for the additional information. We've just published ReactFire 4.2.2, which is the first release with a new build process (#534) that includes a specific list of externals, and I believe solves this issue:

reactfire/vite.config.ts

Lines 13 to 34 in f6d2351

    
           const externals = [ 
        
             'react', 
        
             'firebase', 
        
             'firebase/app', 
        
             'firebase/firestore', 
        
             'firebase/firestore/lite', 
        
             'firebase/auth', 
        
             'firebase/functions', 
        
             'firebase/storage', 
        
             'firebase/database', 
        
             'firebase/remote-config', 
        
             'firebase/performance', 
        
             '@firebase/app', 
        
             '@firebase/firestore', 
        
             '@firebase/firestore/lite', 
        
             '@firebase/auth', 
        
             '@firebase/functions', 
        
             '@firebase/storage', 
        
             '@firebase/database', 
        
             '@firebase/remote-config', 
        
             '@firebase/performance', 
        
           ];

@alexduhem or others - can you please give version 4.2.2 a try and see if it fixes this issue without the need for workarounds?

@jhuleatt

Hi @jhuleatt, Thanks for the update. I upgraded from v4.2.1 to v4.2.2 and ran webpack-bundle-analyzer. It looks like the unused packages from @firebase have been removed, but now the reactfire bundle is massive.

Dependencies

firebase@9.9.1
webpack@5.74.0

Before

reactfire

./node_modules/reactfire/dist/reactfire.esm.js (15.42 KB)
./node_modules/reactfire/dist (15.42 KB)

@firebase

./node_modules/@firebase (175.17 KB)
./node_modules/@firebase/auth/dist/esm2017/index.js + 1 modules (concatenated) (74.85 KB)
./node_modules/@firebase/firestore/dist/index.esm2017.js + 1 modules (concatenated) (69.98 KB)
./node_modules/@firebase/storage/dist/index.esm2017.js (8.79 KB)
./node_modules/@firebase/app/dist/esm/index.esm2017.js (8.09 KB)
./node_modules/@firebase/util/dist/index.esm2017.js (7.46 KB)
./node_modules/@firebase/component/dist/esm/index.esm2017.js (4.3 KB)
./node_modules/@firebase/logger/dist/esm/index.esm2017.js (1.7 KB)
./node_modules/@firebase/auth/dist/esm2017 (74.85 KB)
./node_modules/@firebase/firestore/dist (69.98 KB)
./node_modules/@firebase/storage/dist (8.79 KB)
./node_modules/@firebase/app/dist/esm (8.09 KB)
./node_modules/@firebase/util/dist (7.46 KB)
./node_modules/@firebase/component/dist/esm (4.3 KB)
./node_modules/@firebase/logger/dist/esm (1.7 KB)

After

reactfire

./node_modules/reactfire/dist (249.97 KB)
./node_modules/reactfire/dist/index.js + 14 modules (concatenated) (249.97 KB)

@firebase

./node_modules/@firebase (100.38 KB)
./node_modules/@firebase/auth/dist/esm2017/index.js + 1 modules (concatenated) (74.85 KB)
./node_modules/@firebase/util/dist/index.esm2017.js (11.43 KB)
./node_modules/@firebase/app/dist/esm/index.esm2017.js (8.09 KB)
./node_modules/@firebase/component/dist/esm/index.esm2017.js (4.3 KB)
./node_modules/@firebase/logger/dist/esm/index.esm2017.js (1.7 KB)
./node_modules/@firebase/auth/dist/esm2017 (74.85 KB)
./node_modules/@firebase/util/dist (11.43 KB)
./node_modules/@firebase/app/dist/esm (8.09 KB)
./node_modules/@firebase/component/dist/esm (4.3 KB)
./node_modules/@firebase/logger/dist/esm (1.7 KB)

@robertn702

@robertn702 thanks for trying it out! That's a big surprise to me. According to bundlephobia, the bundle is smaller than 4.2.1, not bigger: https://bundlephobia.com/package/reactfire@4.2.2. Any chance your 4.2.1 build reports rxjs or rxfire separately, where 4.2.2 might just report them all combined as reactfire?

I'll look into this a bit more. Thanks again!

cc @jamesdaniels

@jhuleatt

Hi @jhuleatt, I am unsure if the issue is on Next.js or Reactifire's end, but when using both, everything from Firebase is pulled in the final bundle just by importing the main app provider in _app.tsx.

I have provided a repository to reproduce this issue:

git clone https://github.com/Gbuomprisco/reactfire-bundle-issue
npm i
npm run analyze

When finished, the browser will open the output below:

Any help would be super appreciated!

@Gbuomprisco

I am facing the same issue as @Gbuomprisco

@Laityned

@Laityned if it can help, I worked it around by extending the webpack config in the next.js config file like below:

webpack: (config, { isServer }) => {
    // we remove unnecessary Firebase packages
    // only in production due to tree shaking
    if (isProduction) {
      decorateConfigWithFirebaseExternals(config);
    }

    return config;
  },

function decorateConfigWithFirebaseExternals(config) {
  config.externals = [
    ...(config.externals ?? []),
    {
      'firebase/functions': 'root Math',
      'firebase/database': 'root Math',
      'firebase/performance': 'root Math',
      'firebase/remote-config': 'root Math'
    },
  ];
}

Thank you for the work around. I will definitely use it.
Furthermore, I think reactfire should still address the root cause of this problem.

I could help with a PR, if anyone has a clue why it is not tree shaking out firebase.

The library is basically unmaintained, which is sad.

Navigation Menu

Repository navigation

@firebase/database included in the final build while I only use firestore #489

Before

After

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const externals = [
	'react',
	'firebase',
	'firebase/app',
	'firebase/firestore',
	'firebase/firestore/lite',
	'firebase/auth',
	'firebase/functions',
	'firebase/storage',
	'firebase/database',
	'firebase/remote-config',
	'firebase/performance',
	'@firebase/app',
	'@firebase/firestore',
	'@firebase/firestore/lite',
	'@firebase/auth',
	'@firebase/functions',
	'@firebase/storage',
	'@firebase/database',
	'@firebase/remote-config',
	'@firebase/performance',
	];

@firebase/database included in the final build while I only use firestore #489

Description

Activity

jhuleatt commented on Nov 24, 2021

robertn702 commented on Jul 4, 2022

alexduhem commented on Jul 20, 2022

jhuleatt commented on Aug 17, 2022

robertn702 commented on Aug 18, 2022

Before

After

jhuleatt commented on Aug 18, 2022

Gbuomprisco commented on Sep 16, 2022

Laityned commented on Nov 22, 2022

Gbuomprisco commented on Nov 23, 2022

Laityned commented on Nov 23, 2022

Gbuomprisco commented on Nov 23, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions