如何在Firebase v9中实现模块动态加载以优化页面加载速度？

优化策略可行性 #

这个优化方案完全可行。Firebase 9采用模块化ESM设计，原生支持按需动态导入，仅在需要时加载对应模块的实现逻辑，能有效减少首屏需要加载的代码体积，是符合性能优化规范的最佳实践。

报错原因 #

你遇到的The top-level-await experiment is not enabled报错，是因为你直接在模块顶层使用了await关键字，webpack默认未开启顶层await特性支持。
针对你的按需加载需求，不需要在顶层执行动态导入，也不需要修改webpack配置，把导入逻辑写到对应交互的回调函数中即可。

实现示例 #

前置准备：提前初始化Firebase核心 #

Firebase核心包体积非常小，提前初始化不会影响首屏加载速度：

import { initializeApp } from "firebase/app";

// 替换为你的项目配置
const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx"
};

const app = initializeApp(firebaseConfig);

点击登出时动态加载auth模块 #

// 登出按钮点击事件监听
document.querySelector('#logout-button').addEventListener('click', async () => {
  // 仅在触发点击时才加载auth相关方法
  const { getAuth, signOut } = await import('firebase/auth');
  const auth = getAuth(app);
  
  try {
    await signOut(auth);
    // 此处补充登出成功后的逻辑，比如跳转登录页、清空本地存储等
  } catch (err) {
    // 处理登出错误
    console.error('登出失败：', err);
  }
});

特殊场景：开启顶层await支持 #

如果你确实需要在模块顶层使用await导入模块，可以修改webpack配置开启对应特性：

// webpack.config.js
module.exports = {
  // 其余配置保持不变
  experiments: {
    topLevelAwait: true
  }
}

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