How to properly do tree shaking to reduce bundle size and separate entry point for each cloud function

Question

I am using Google Firebase Cloud Functions with TypeScript, and I found out that even though each function is deployed separately, they all share the same bundles and dependencies, even if some functions do not use them nor import them.

In my case, one cloud function uses Redis and others don't. I have 10 functions. All 10 functions actually end up importing redis related code even though they don't import them.

Since all functions share the same entry point, index.js. It currently seems it's impossible to have separate tree-shaken bundles / entry points for each function.

This is very inefficient in terms of bundle size / cold start timing / memory / etc. It also means as I have more and more functions, bundle size will grow for all functions together. It's not scalable.

Is there any way to not share the entry point, index.js, and have completely separate bundles by using bundlers like webpack?

Answer 1

You can create a different local Firebase working area (with firebase init) for each function that should deploy in isolation from the others. You will have to instruct the CLI not to overwrite the other functions on deployment using the --only functions:yourFunctionName to deploy it.

Or, you can deploy function using Cloud tools (gcloud) instead of Firebase tools, but you won't be able to use firebase-functions and its TypeScript bindings.

Or, you can lazily load your modules instead of statically loading them at the global scope of your functions, as described in this video.

I don't recommend using webpack. It's not going to be worth your time to get it configured.