Summarising The Problem: Is there any way of distributing functions which use a common external module into different files such that I don't need to download the same external modules again in each file. (In Vanilla JS)

Detailing: Hi There! So I have Been Using Firebase 9.6.0 For My Project(single js file) where I used to import it (Vanilla JS). But now the project has become lot bigger and using a single JS file is not favorable anymore. I read about importing and exporting functions. So I tried something like the following (main.js is imported as a module in HTML file):

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();
   ....
}

it doesnt work anymore. Is it because i didnt import firebase modules in the other module? But if thats the case splitting them would just mean i need to download the same js modules again an again. So is there any way of fixing this?