Repository navigation
@firebase/database included in the final build while I only use firestore #489
Description
Activity
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?
Hi @jhuleatt I am still running into this issue using the following. Webpack is properly tree-shaking other libraries but
reactfireis still loadingfirestoreandstorage.Dependencies
firebase@9.8.4reactfire@4.2.1react@17.0.2webpack@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 appThanks 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:Lines 13 to 34 in f6d2351
@alexduhem or others - can you please give version
4.2.2a try and see if it fixes this issue without the need for workarounds?Reacted by RobertHi @jhuleatt, Thanks for the update. I upgraded from
v4.2.1tov4.2.2and ranwebpack-bundle-analyzer. It looks like the unused packages from@firebasehave been removed, but now thereactfirebundle is massive.Dependencies
firebase@9.9.1webpack@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 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 your4.2.1build reportsrxjsorrxfireseparately, where4.2.2might just report them all combined asreactfire?I'll look into this a bit more. Thanks again!
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 analyzeWhen finished, the browser will open the output below:
Any help would be super appreciated!
I am facing the same issue as @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' }, ]; }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.
Reacted by J0E
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).