时间戳

首页 > 解决方案 > Firebase v9 在移动设备上加载大型 iframe.js (263K)

angular - Firebase v9 在移动设备上加载大型 iframe.js (263K)

问题描述

将 Firebase 从 V8 升级到 V9 后，仅在移动版本上，有一个 IFRAME从https://[Firebase projectId].firebaseapp.com/__/auth/iframe.js加载一个巨大的 javascript 文件（ 263K ） （见下图):

在此处输入图像描述

到目前为止，我发现的唯一线索是它可能与本论坛中提到的 chrome 中的第三方 cookie 限制有关：https ://groups.google.com/g/firebase-talk/c/TC1xTPG85EI 。

我没有在 Chrome 中使用任何 cookie 限制，因为基于此处的设置允许所有 cookie：chrome://settings/cookies?search=cookies

此外，我已禁用安全浏览增强保护并在此处将其设置为无保护（不推荐）：chrome://settings/security?search=cookies

但 iframe.js 仍在移动模式下加载。

我在这里使用带有版本 9 模块化（不兼容）代码片段的firebase@9.0.0-beta.8库： https ://firebase.google.com/docs/web/modular-upgrade 。

任何关于摆脱这个巨大的 iframe.js 文件的想法或线索将不胜感激。尽管该库是 BETA，但其他一切都可以通过 tree-shaking 来按预期工作，从而大大减少了客户端包的大小。

您可以在我的个人网站上使用 Lighthouse 进行测试： https ://guydumais.digital

先谢谢了，再见！

标签： angularfirebasefirebase-authenticationnext.jsangularfire

解决方案

我们也有这个问题很长一段时间，我最近才发现这个链接 https://firebase.google.com/docs/auth/web/custom-dependencies

在移动浏览器上，该库会自动为您的 Auth 域抢先打开 iframe。这样做是为了让大多数用户获得无缝体验，但它会在应用程序启动时加载额外的代码来影响性能。可以通过利用 initializeAuth() 并手动将 browserPopupRedirectResolver 依赖项传递给需要它的函数来避免这种行为

import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: [indexedDBLocalPersistence, browserLocalPersistence],
});

// Later
signInWithRedirect(auth, new GoogleAuthProvider(), browserPopupRedirectResolver);

推荐阅读