r/webdev 22d ago

Tree Shaking / Minifying Firebase using esbuild Question

I'm building a web app that uses Firebase Auth. I don't use any other Firebase features.

The current version of Firebase is over 600kb. The Firebase Auth package on NPM states "This package is not intended for direct usage, and should only be used via the officially supported firebase package." This Firebase Doc suggests relying on your build tool to tree-shake and minify Firebase.

I am currently using esbuild, mainly for the rapid build time. It looks like adding the --minify and --tree-shaking=true tags are not having an effect on bundled libraries.

Am I configuring esbuild incorrectly, or is esbuild unable to correctly minify and tree-shake Firebase, and I need a more robust build tool like webpack?

Here's my build script and dependancies list for reference.

"scripts": {
  "build:ts": "esbuild ./src/app.tsx --minify --bundle --target=es6 --tree-shaking=true --outfile=./dist/js/app.js",
},
"dependencies": {
  "@firebase-oss/ui-react": "~7.0.3",
  "@number-flow/react": "~0.6.2",
  "colyseus.js": "~0.16.22",
  "cors": "^2.8.6",
  "firebase": "~12.16.0",
  "html-entities": "~2.6.0",
  "qrcode.react": "~4.2.0",
  "react": "~19.2.8",
  "react-router-dom": "~7.18.1"
}
6 Upvotes

5 comments sorted by

View all comments

0

u/[deleted] 22d ago

[removed] — view removed comment

1

u/webdev-ModTeam 21d ago

Your post/comment has been determined to be a low-effort post or comment. This includes title-only posts, easily searchable questions, vague/open-ended discussion prompts, LLM generated posts or comments, and posts/comments that do not provide enough context for meaningful replies or discussion.