firebase模块的动态加载？ (v9)答案

【问题标题】：Dynamic loading of firebase modules? (v9)firebase模块的动态加载？ (v9)
【发布时间】：2021-12-31 01:45:09
【问题描述】：

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

到目前为止我已经尝试过：

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

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

【问题讨论】：

标签： javascript firebase dynamic lazy-loading

【解决方案1】：

错误信息非常清楚：除非您在 webpack 配置中明确允许它，否则 await 关键字不能在顶级代码中使用。

也就是说，您不需要在 import 语句中使用 await，因为这已经在构建期间同步处理了。如Firebase中的示例documentation一样：

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

所以在你的情况下，使用：

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

【讨论】：

我特别想避免同步导入所有 firebase 模块。基本上我只想在需要时动态导入它们以减少我的网络应用程序加载时间。
此时无法仅导入特定功能：浏览器只能导入整个模块，或者什么都不导入。如果您想从摇树中受益，您应该使用我分享的导入语法并在服务器上执行此操作。如果您想在客户端上动态加载必要的 SDK，您可以通过常规脚本导入来实现 - 但您将加载整个（非树抖动）SDK。例如，请参阅我的脚本块中的导入：jsbin.com/gekuqec/edit?html,console
感谢您的澄清。你会推荐什么来减少加载时间？似乎使用上述格式（摇树）导入模块会导致我的 boundle.js 文件非常重（> 200KB），仅用于导入数据库和授权。在开发模式下只有“导入”的相同 js >2000KB。这是意料之中的吗？
减少加载时间的推荐方法是让你的打包器（通常是 webpack）在构建过程中摆脱未使用的方法。这也是文档假设和描述的过程。如果您认为以这种方式获得的结果太大，请发布一个（新）问题，说明您做了什么以及获得的结果（以我们可以通过复制/粘贴复制的方式）。
@blupotatos 这里有更新吗？

【解决方案2】：

我在延迟加载仅 Firestore 时遇到了类似的问题。通常，我不需要为每个页面加载 Firestore，因为页面是 SSR，我需要 Firestore 的唯一时间是用户单击“加载更多”时。

我设法用下面的代码（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);

【讨论】：