Bundle includes unused firebase modules with the new angularfire API #3075
Description
Version info
Angular: 13.0.0
Firebase: 9.4.1
AngularFire: 7.2.0
How to reproduce these conditions
I'm using the new angular fire API and I see great improvements in comparison with the old compat api regarding bundle size. Nevertheless I still see in the final bundle that it includes some things (like analytics, app-check, messaging) that I'm not using.
These functions are never imported in the code, and my firebase module looks like this:
import { NgModule } from '@angular/core';
import { environment } from 'src/environments/environment';
import { getApp, initializeApp, provideFirebaseApp } from '@angular/fire/app';
import {
provideAuth, initializeAuth, browserPopupRedirectResolver,
indexedDBLocalPersistence
} from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { getFunctions, provideFunctions } from '@angular/fire/functions';
import { getStorage, provideStorage } from '@angular/fire/storage';
import {
connectAuthEmulatorInDevMode,
connectFirestoreEmulatorInDevMode,
connectFunctionsEmulatorInDevMode,
connectStorageEmulatorInDevMode
} from './emulators';
@NgModule({
imports: [
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => {
const firestore = getFirestore();
if (environment.firebase.localEmulator) {
connectFirestoreEmulatorInDevMode(firestore);
}
return firestore;
}),
provideFunctions(() => {
const functions = getFunctions();
if (environment.firebase.localEmulator) {
connectFunctionsEmulatorInDevMode(functions);
}
return functions;
}),
]
})
export class FirebaseModule {}
@NgModule({
imports: [
provideStorage(() => {
const storage = getStorage();
if (environment.firebase.localEmulator) {
connectStorageEmulatorInDevMode(storage);
}
return storage;
}),
provideAuth(() => {
const auth = initializeAuth(getApp(), {
persistence: indexedDBLocalPersistence,
popupRedirectResolver: browserPopupRedirectResolver,
});
if (environment.firebase.localEmulator) {
connectAuthEmulatorInDevMode(auth);
}
return auth;
})
]
})
export class FirebaseBrowserModule {}
As I'm using only storage, firestore, functions, and auth, I would expect to only see that in the generated bundle:
It seems that the other modules are being included.
Is this the expected behavior? I thought that the new structure allowed to actually prevent this.
Also, is that a normal firestore bundle size? I'm using only these:
import {
collection, doc, docData, Firestore, query, collectionSnapshots,
DocumentSnapshot, QueryDocumentSnapshot, DocumentData, updateDoc, setDoc,
DocumentReference, UpdateData, addDoc, deleteDoc, QueryConstraint
} from '@angular/fire/firestore';
For reference I include here the same app, but with the compat API:
So the improvement is already quite good, from 167 KB to 113 KB. I hope there is still room for improvement.