燃烧基地模块的动态装载?(v9)

Question

我使用的是最新的Firebase版本9，我试图优化加载时间。一种方法可以是仅在需要时动态加载firebase模块，而不是等待所有模块都被加载。例如，仅当用户单击注销按钮时，才从'firebase/auth'导入signOut()函数。这个策略行得通吗？我正努力在第9号火基地上实施它。有什么例子吗？

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

index.js：下面的代码不起作用，显然webpack无法编译(错误：没有启用顶级等待实验(

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

Answer 1

我也遇到过类似的问题，只延迟加载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);

Answer 2

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

也就是说，导入语句不需要await，因为这已经在构建过程中同步处理了。如Firebase文档中的示例所示，如：

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

因此，在您的情况下，请使用：

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