Vanilla JS拆分依赖公共外部模块的函数到多文件避免重复加载

你的代码运行失败核心有两个问题：

• module1.js 没有显式导入依赖的Firebase方法与实例：ES模块是独立词法作用域，每个文件的依赖都需要单独声明，不会自动继承其他文件里导入的getDoc、doc、db等变量，直接调用必然触发未定义错误。
• getData函数内使用了await但未声明为async函数，本身存在语法错误。

完全不会出现重复下载的问题。浏览器原生实现了ES模块缓存机制：只要导入的模块URL完全一致，无论在多少个文件中引用，浏览器只会发起一次网络请求，后续所有导入都会直接读取缓存中已解析完成的模块实例，不会重复消耗流量，也不会重复执行模块代码，这是ES规范明确要求的行为，所有现代浏览器均已支持。

原生JS环境下不需要打包工具，直接按ES模块标准写法拆分即可，推荐两种落地方式：

方案1：各文件按需导入依赖（零额外成本，最符合标准） #

在每个业务模块中，只导入当前文件用到的依赖即可，无需额外封装。
修正后的代码参考：

// 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 } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore.js";
import { getData } from "./module1.js";

// 替换为你自己的Firebase项目配置
const firebaseConfig = {}
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
// 导出初始化完成的db实例，供其他模块调用
export const db = getFirestore(app);

// 业务调用
getData().then(res => console.log(res))

// file: module1.js
// 仅导入当前文件需要的Firebase方法
import { getDoc, doc } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore.js";
// 导入main.js中初始化好的db实例
import { db } from "./main.js";

// 函数前必须加async关键字才能使用await
export async function getData(){
  try {
    const docSnap = await getDoc(doc(db, "fruit", "apple"))
    if (docSnap.exists()) {
      return docSnap.data();
    }
    return null
  } catch (err) {
    console.error("获取数据失败：", err)
  }
}

HTML中引入入口文件时必须声明type="module"，本地模块路径要加./前缀，否则浏览器会识别为外部资源请求报错：

<script type="module" src="./main.js"></script>

方案2：抽离公共依赖入口（适合依赖较多的项目，维护成本更低） #

如果觉得每个文件写长串CDN地址麻烦，可以单独抽离一个Firebase初始化文件，统一导出所有需要的方法与实例，其他模块全部从这个文件导入依赖。后续升级Firebase版本、修改初始化配置只需要改这一个文件即可。
代码参考：

// file: firebase.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";

const firebaseConfig = {} // 替换为你的项目配置
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const db = getFirestore(app);

// 统一导出业务会用到的Firebase方法
export {
  collection,
  addDoc,
  arrayRemove,
  setDoc,
  updateDoc,
  getDocs,
  doc,
  serverTimestamp,
  getDoc
}

后续所有业务文件都从这个统一入口导入即可：

// file: module1.js
import { getDoc, doc, db } from "./firebase.js";
export async function getData() {
  // 业务逻辑和之前一致
}

• 本地模块导入必须写正确的相对路径，./前缀不能省略
• ES模块默认运行在严格模式，所有变量不会挂载到全局window对象，不要试图通过全局作用域传值
• 生产环境如果需要进一步优化加载速度，可以后续接入import maps简化导入路径，或者使用轻量打包工具做代码压缩，原生开发阶段上述方案完全可以满足需求。

内容的提问来源于stack exchange，提问作者mrtechtroid