Resumiendo el problema: ¿Hay alguna forma de distribuir funciones que usen un módulo externo común en diferentes archivos de modo que no necesite descargar los mismos módulos externos nuevamente en cada archivo? (En vainilla JS)

Detallando: ¡Hola! Así que he estado usando Firebase 9.6.0 para mi proyecto (archivo js único) donde solía importarlo (Vanilla JS). Pero ahora el proyecto se ha vuelto mucho más grande y usar un solo archivo JS ya no es favorable. Leí acerca de las funciones de importación y exportación. Entonces probé algo como lo siguiente (main.js se importa como un módulo en un archivo HTML):

 file:main.js import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js"; import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-analytics.js"; import { getFirestore, collection, addDoc,arrayRemove, setDoc, updateDoc, getDocs, doc, serverTimestamp, getDoc, } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore.js"; import { getData } from "module1.js"

 file: module1.js export function getData(){ try { let docSnap = await getDoc(doc(db, "fruit","apple" )) if (docSnap.exists()) { var docJSON = docSnap.data(); .... }

ya no funciona ¿Es porque no importé módulos de base de fuego en el otro módulo? Pero si ese es el caso, dividirlos solo significaría que necesito descargar los mismos módulos js una y otra vez. Entonces, ¿hay alguna forma de arreglar esto?