Firebase模块的动态加载？(v9)

Question

我正在使用最新版本的Firebase 9，并尝试优化加载时间。一种方法是仅在需要时动态加载Firebase模块，而不是等待所有模块都加载完成。例如，仅在用户单击“退出”按钮时从“firebase/auth”导入“signOut()”函数。这种策略有效吗？我正在尝试在Firebase 9上实现它。是否有可用的示例？

到目前为止，我尝试过以下内容：

index.js：下面的代码无法工作，显然Webpack无法编译（错误：未启用顶级等待实验）。

let {signOut, signInAnonymously, etc.} = await import('firebase/auth');

- blu potatos

Answer 1

我曾遇到只加载Firestore的懒加载类似问题。通常来说，由于我的页面是SSR的，我不需要为每个页面加载Firestore，唯一需要加载Firestore的时候是当用户点击“Load more”时。

我使用下面的代码解决了这个问题（Firebase V9）：

let database = null;

async function loadFirestore() {
  if (!database) {
    const { initializeApp } = await import('firebase/app');
    const { getFirestore } = await import('firebase/firestore');
    const app = initializeApp(firebaseConfig);
    database = getFirestore(app);
  }

  return database;
}

export { loadFirestore };

然后在我的页面上：

const db = await loadFirestore();
const videoRef = doc(db, 'collection-name', id);

- Andurit

Answer 2

错误信息很明确：除非在webpack配置中显式允许，否则await关键字不能用于顶级代码。

话虽如此，在导入语句上不需要使用await，因为这在构建期间已经同步处理了。如Firebase文档中的示例所示：documentation。

import { getAuth, signInAnonymously } from "firebase/auth";

在您的情况下，请使用：

import { signOut, signInAnonymously } from 'firebase/auth');

- Frank van Puffelen

---

我特别想避免同步导入所有 Firebase 模块。基本上，我只想在需要时动态地导入它们，以减少我的 Web 应用程序的加载时间。 - blu potatos

此时没有办法只导入特定的函数：浏览器只能导入整个模块或者什么都不导入。如果你想要享受 tree shaking 的好处，你应该使用我分享的 import 语法并在服务器上执行。如果你想要在客户端动态加载必要的 SDK，你可以使用常规的脚本导入 - 但是你将会加载整个（未经 tree shaking 处理的）SDK。例如，在我的脚本块中看到的导入：https://jsbin.com/gekuqec/edit?html,console - Frank van Puffelen

谢谢澄清。您会推荐什么来减少加载时间？似乎使用上述格式（摇树）导入模块会导致我的boundle.js文件非常重（> 200KB），仅用于导入数据库和授权。相同的js在开发模式下仅有“imports”时为> 2000KB。这是预期的吗？ - blu potatos

推荐减少网页加载时间的方式是让您的打包程序（通常为 webpack）在构建过程中摆脱未使用的方法。文档也是基于这个流程进行描述和说明的。如果您认为这种方式得到的结果太大，请发表一个新问题，并展示您所做的和您所得到的结果（以一种我们可以复制粘贴的方式）。 - Frank van Puffelen

@blupotatos 这里有更新吗？ - Frank van Puffelen

我创建了一个带有详细信息和代码的新问题，但目前还没有答案。https://stackoverflow.com/questions/70050721/firebase-version-9-taking-too-long-to-load - blu potatos