El tamaño de mi paquete NextJS parece ser enorme (200-300 kB en la primera carga por página). Ejecuté el analizador de paquetes y el culpable parece ser Firebase, que uso para la autenticación de usuarios, el almacenamiento de datos en Firestore y la llamada a las funciones de Firebase. He visto estrategias para reducir el tamaño de los paquetes, como usar importaciones dinámicas, pero creo que el problema tiene más que ver con la forma en que instancia Firebase. Esto es lo que estoy haciendo:

clientApp.ts:

 import firebase from "firebase/compat/app"; import "firebase/compat/auth"; import "firebase/compat/firestore"; import "firebase/compat/functions"; const clientCredentials = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, }; if (!firebase.apps.length) { firebase.initializeApp(clientCredentials); } const firebaseFunctions = firebase.functions(); firebaseFunctions.useEmulator("localhost", 5001); export const auth = firebase.auth(); export const db = firebase.firestore(); export const functions = firebaseFunctions;

AuthContext.tsx:

 import React from "react"; import firebase from "firebase/compat/app"; export const AuthContext = React.createContext<firebase.User | null>(null);

_app.tsx:

 import "../styles/globals.css"; import type { AppProps } from "next/app"; import { AuthProvider } from "../provider/AuthProvider"; function MyApp({ Component, pageProps }: AppProps) { return ( <AuthProvider> <div className="h-screen w-screen overflow-y-hidden"> <Component {...pageProps} /> </div> </AuthProvider> ); } export default MyApp;

Luego, llamo a const user = useContext(AuthContext); en mis páginas para obtener los datos de la sesión del usuario. Para usar Firestore o funciones, importo db o functions desde clientApp.ts . ¿Tiene esto sentido o es ineficiente y contribuye al gran tamaño del paquete?

Probé las importaciones dinámicas, pero no las implementé correctamente o no son útiles en esta situación.