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

[MaciejCaputa]

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).

[jhuleatt]

Hi @MaciejCaputa, I think this might be related to an issue I'm investigating https://github.com/FirebaseExtended/reactfire/issues/488#issuecomment-974375449.

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

[robertn702]

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

• [email protected]
• [email protected]
• [email protected]
• [email protected]

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

This is our treemap of the firebase bundle from Lighthouse:

[alexduhem]

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

[jhuleatt]

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

https://github.com/FirebaseExtended/reactfire/blob/f6d23515a2c40f6da54b86612130cd458bd19b59/vite.config.ts#L13-L34

@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?

[robertn702]

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

• [email protected]
• [email protected]

---

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)

[jhuleatt]

@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/[email protected]. 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

[Gbuomprisco]

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!

[Laityned]

I am facing the same issue as @Gbuomprisco

[Gbuomprisco]

@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'
    },
  ];
}

[Laityned]

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.

[Gbuomprisco]

The library is basically unmaintained, which is sad.